How to use min and max Attributes In HTML
In this approach, we are using the min and max attributes directly on the <input type=”date”> element to define the acceptable range of dates. When a date is selected, an event listener triggers an alert displaying the selected date.
Syntax:
<input type="date" id="date" name="date"
min="min_date" max="max_date">
Example: The below example uses min and max attributes to set minimum and maximum dates in the HTML date picker.
<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
color: green;
}
h3 {
margin-bottom: 20px;
}
p {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<h3>
Using min and max Attributes
</h3>
<label for="date">
Select a date:
</label>
<input type="date" id="date" name="date"
min="2024-03-15" max="2024-03-31">
<p>
Accepted Range:
2024-03-15 to 2024-03-31
</p>
<script>
const datePicker =
document.getElementById('date');
datePicker.addEventListener('change',
function () {
const selectedDate = datePicker.value;
alert('Selected Date: ' + selectedDate);
});
</script>
</body>
</html>
Output:
How to set minimum and maximum date in HTML date picker
In HTML, validating and setting the minimum and maximum dates can be done using various approaches. This is useful in the real-time applications of booking, event scheduling, etc.
Table of Content
- Using min and max Attributes
- Using JavaScript to Set min and max Dates