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 Datetime max Property
The HTML DOM Input Datetime max property returns or sets the value of the max attribute of an HTML datetime input element. This property defines the maximum date and time value that a user can enter in the datetime field.
Syntax
Following is the syntax for returning the max property −
inputDatetimeObject.max
Following is the syntax for setting the max property −
inputDatetimeObject.max = "YYYY-MM-DDThh:mm:ssTZD"
Property Value
The max property accepts a string value representing a date and time in ISO 8601 format. The format YYYY-MM-DDThh:mm:ssTZD consists of the following components −
| Component | Description | Example |
|---|---|---|
| YYYY | Four-digit year | 2024 |
| MM | Two-digit month (01-12) | 05 (May) |
| DD | Two-digit day of month (01-31) | 24 |
| T | Separator between date and time | T |
| hh | Two-digit hour (00-23) | 14 (2 PM) |
| mm | Two-digit minutes (00-59) | 30 |
| ss | Two-digit seconds (00-59) | 45 |
| TZD | Time Zone Designator (Z for UTC, or ±hh:mm) | Z or +05:30 |
Return Value
The property returns a string representing the maximum date and time value, or an empty string if no max attribute is set.
Example − Getting and Setting Max Property
Following example demonstrates how to get and set the max property of a datetime input −
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Max Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Insurance Registration Form</h2>
<form>
<label for="dateTime">Expiry Date & Time:</label>
<input type="datetime" id="dateTime" name="DateSelect"
value="2019-12-31T23:49:59Z"
max="2019-12-31T23:59:59Z">
</form>
<br>
<button onclick="getMaxDate()">Show Current Max</button>
<button onclick="renewInsurance()">Renew Insurance</button>
<div id="divDisplay" style="margin-top: 15px; padding: 10px; background-color: #f0f0f0; border-radius: 5px;"></div>
<script>
var inputDate = document.getElementById("dateTime");
var divDisplay = document.getElementById("divDisplay");
divDisplay.innerHTML = '<strong>Current Insurance Max Datetime:</strong> ' + inputDate.max;
function getMaxDate() {
divDisplay.innerHTML = '<strong>Current Max Value:</strong> ' + inputDate.max;
}
function renewInsurance() {
var oldMax = inputDate.max;
inputDate.max = '2029-12-31T23:59:59Z';
divDisplay.innerHTML = '<strong>Insurance Renewed!</strong><br>' +
'Old Max: ' + oldMax + '<br>' +
'New Max: ' + inputDate.max;
}
</script>
</body>
</html>
The output shows the datetime input with current max value. Clicking "Renew Insurance" updates the max property to extend the insurance period by 10 years −
Current Insurance Max Datetime: 2019-12-31T23:59:59Z (After clicking "Renew Insurance"): Insurance Renewed! Old Max: 2019-12-31T23:59:59Z New Max: 2029-12-31T23:59:59Z
Example − Form Validation with Max Property
Following example shows how the max property can be used for form validation −
<!DOCTYPE html>
<html>
<head>
<title>Datetime Max Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Registration</h2>
<form>
<label for="eventDate">Event Date & Time:</label>
<input type="datetime" id="eventDate" name="eventDate"
max="2024-12-31T23:59:59Z">
</form>
<br>
<button onclick="validateDate()">Validate Selection</button>
<button onclick="updateMaxDate()">Extend Registration</button>
<div id="result" style="margin-top: 15px; padding: 10px; border-radius: 5px;"></div>
<script>
function validateDate() {
var eventInput = document.getElementById("eventDate");
var result = document.getElementById("result");
var selectedValue = eventInput.value;
var maxValue = eventInput.max;
if (!selectedValue) {
result.innerHTML = '<span style="color: orange;">Please select a date and time.</span>';
result.style.backgroundColor = '#fff3cd';
return;
}
if (selectedValue <= maxValue) {
result.innerHTML = '<span style="color: green;">? Valid selection! Selected: ' + selectedValue + '</span>';
result.style.backgroundColor = '#d4edda';
} else {
result.innerHTML = '<span style="color: red;">? Invalid! Max allowed: ' + maxValue + '</span>';
result.style.backgroundColor = '#f8d7da';
}
}
function updateMaxDate() {
var eventInput = document.getElementById("eventDate");
var result = document.getElementById("result");
eventInput.max = "2025-06-30T23:59:59Z";
result.innerHTML = '<span style="color: blue;">Registration period extended to: ' + eventInput.max + '</span>';
result.style.backgroundColor = '#cce5ff';
}
</script>
</body>
</html>
This example validates the selected datetime against the maximum allowed value and provides feedback to the user.
Browser Compatibility
The datetime input type and its max property have limited browser support. Most modern browsers support the datetime-local input type instead. For broader compatibility, consider using separate date and time inputs or a JavaScript date picker library.
Conclusion
The HTML DOM Input Datetime max property provides a way to programmatically control the maximum allowable date and time value for datetime inputs. It accepts ISO 8601 formatted datetime strings and can be both read and modified using JavaScript, making it useful for dynamic form validation and date range restrictions.
207 Views
