Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Date max Property
The HTML DOM Input Date max property is used to set or return the value of the max attribute of an input element with type="date". This property defines the maximum date that users can select in a date picker, helping to create date range restrictions in forms.
Syntax
Following is the syntax for returning the max value −
inputDateObject.max
Following is the syntax for setting the max value −
inputDateObject.max = "YYYY-MM-DD"
Parameters
The max property accepts a string value in the format YYYY-MM-DD representing the maximum selectable date.
| Component | Description |
|---|---|
| YYYY | Four-digit year (e.g., 2023) |
| MM | Two-digit month from 01 to 12 (e.g., 05 for May) |
| DD | Two-digit day from 01 to 31 (e.g., 24) |
Return Value
The max property returns a string representing the maximum date in YYYY-MM-DD format, or an empty string if no max value is set.
Example − Setting and Getting Max Date
Following example demonstrates how to use the max property to restrict date selection −
<!DOCTYPE html>
<html>
<head>
<title>Input Date Max Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Date Selection with Max Limit</h2>
<form>
<label for="dateInput">Select Date: </label>
<input type="date" id="dateInput" name="DateSelect" max="2023-12-31">
</form>
<button onclick="getMaxDate()">Show Current Max Date</button>
<button onclick="changeMaxDate()">Update Max Date to 2024-06-30</button>
<div id="result" style="margin-top: 15px; padding: 10px; background: #f0f8ff;"></div>
<script>
var inputDate = document.getElementById("dateInput");
var result = document.getElementById("result");
// Display initial max date
result.innerHTML = 'Current max date: ' + inputDate.max;
function getMaxDate() {
result.innerHTML = 'Current max date: ' + inputDate.max;
}
function changeMaxDate() {
inputDate.max = '2024-06-30';
result.innerHTML = 'Max date updated to: ' + inputDate.max;
}
</script>
</body>
</html>
The output shows a date input with a maximum selectable date. Users cannot select dates beyond the specified max value −
Date Selection with Max Limit Select Date: [Date Picker - limited to max date] [Show Current Max Date] [Update Max Date to 2024-06-30] Current max date: 2023-12-31
Example − Dynamic Date Range
Following example shows how to dynamically set date ranges based on user input −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Date Range</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Booking Form</h2>
<form>
<label for="startDate">Start Date: </label>
<input type="date" id="startDate" onchange="updateEndDate()"><br><br>
<label for="endDate">End Date: </label>
<input type="date" id="endDate"><br><br>
</form>
<div id="info" style="margin-top: 15px; padding: 10px; background: #f9f9f9;">
Select a start date to enable end date selection
</div>
<script>
function updateEndDate() {
var startDate = document.getElementById("startDate");
var endDate = document.getElementById("endDate");
var info = document.getElementById("info");
if (startDate.value) {
// Set minimum date for end date to start date
endDate.min = startDate.value;
// Set maximum date to 30 days from start date
var maxDate = new Date(startDate.value);
maxDate.setDate(maxDate.getDate() + 30);
endDate.max = maxDate.toISOString().split('T')[0];
endDate.disabled = false;
info.innerHTML = 'End date can be selected between ' + startDate.value + ' and ' + endDate.max;
} else {
endDate.disabled = true;
endDate.value = '';
info.innerHTML = 'Select a start date to enable end date selection';
}
}
// Initialize
document.getElementById("endDate").disabled = true;
</script>
</body>
</html>
This example demonstrates how the max property works with min to create dynamic date ranges. The end date's max value is automatically calculated based on the start date.
Key Points
The max property only accepts dates in
YYYY-MM-DDformatSetting an invalid date format will be ignored by the browser
The max property works in conjunction with the min property to create date ranges
Users cannot manually enter dates beyond the max limit when using the date picker
The property returns an empty string if no max attribute is set
Browser Compatibility
The Input Date max property is supported in all modern browsers that support the HTML5 date input type, including Chrome, Firefox, Safari, and Edge. Internet Explorer does not support the date input type.
Conclusion
The HTML DOM Input Date max property provides an effective way to restrict date selection in forms by setting an upper boundary for selectable dates. It works seamlessly with the min property to create comprehensive date range validation, enhancing user experience and form data integrity.
200 Views
