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 DatetimeLocal max Property
The HTML DOM Input DatetimeLocal max property returns or sets the maximum allowed date and time value for a datetime-local input field. This property corresponds to the max attribute in HTML and helps restrict user input to a specific upper limit.
Syntax
Following is the syntax for returning the max value −
inputDatetimeLocalObject.max
Following is the syntax for setting the max value −
inputDatetimeLocalObject.max = "YYYY-MM-DDThh:mm:ss"
Return Value
The max property returns a string representing the maximum date and time value in the format YYYY-MM-DDThh:mm:ss. If no max attribute is set, it returns an empty string.
String Format
The datetime-local max value follows the ISO 8601 format. Here are the components −
| Component | Description |
|---|---|
| YYYY | Four-digit year (e.g., 2024) |
| MM | Two-digit month (01-12, e.g., 06 for June) |
| DD | Two-digit day (01-31, e.g., 17) |
| T | Separator between date and time components |
| hh | Two-digit hour in 24-hour format (00-23, e.g., 14 for 2 PM) |
| mm | Two-digit minutes (00-59, e.g., 30) |
| ss | Two-digit seconds (00-59, e.g., 45) - optional |
Example − Setting and Getting Max Value
Following example demonstrates how to set and retrieve the max property of a datetime-local input −
<!DOCTYPE html>
<html>
<head>
<title>DatetimeLocal Max Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Booking System</h2>
<label for="eventDate">Select Event Date and Time:</label>
<input type="datetime-local" id="eventDate" value="2024-01-15T10:00">
<br><br>
<button onclick="setMaxDate()">Set Max to Dec 31, 2024</button>
<button onclick="getMaxDate()">Get Max Date</button>
<button onclick="clearMax()">Clear Max</button>
<p id="result"></p>
<script>
const eventInput = document.getElementById("eventDate");
const result = document.getElementById("result");
function setMaxDate() {
eventInput.max = "2024-12-31T23:59";
result.textContent = "Max date set to: " + eventInput.max;
}
function getMaxDate() {
const maxValue = eventInput.max;
result.textContent = maxValue ? "Current max: " + maxValue : "No max date set";
}
function clearMax() {
eventInput.max = "";
result.textContent = "Max date cleared";
}
</script>
</body>
</html>
The output shows how the max property controls the upper limit for date selection −
Event Booking System Select Event Date and Time: [2024-01-15T10:00] [Set Max to Dec 31, 2024] [Get Max Date] [Clear Max] (Clicking buttons will display results below)
Example − Insurance Renewal System
Following example shows a practical use case for the max property in an insurance renewal system −
<!DOCTYPE html>
<html>
<head>
<title>Insurance Renewal System</title>
<style>
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
font-family: Arial, sans-serif;
}
.form-group {
margin: 15px 0;
}
input, button {
padding: 8px;
margin: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
background-color: #007bff;
color: white;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
padding: 10px;
background-color: #f8f9fa;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2>Insurance Policy Management</h2>
<div class="form-group">
<label for="policyExpiry">Current Policy Expiry:</label><br>
<input type="datetime-local" id="policyExpiry"
value="2024-07-01T23:59"
max="2024-08-01T23:59"
disabled>
</div>
<button onclick="renewPolicy()">Renew Policy (10 Years)</button>
<button onclick="checkMaxDate()">Check Max Renewal Date</button>
<div id="displayResult" class="result"></div>
</div>
<script>
const policyInput = document.getElementById("policyExpiry");
const displayResult = document.getElementById("displayResult");
function renewPolicy() {
// Set new max date 10 years from now
const currentDate = new Date();
const renewalDate = new Date(currentDate.getFullYear() + 10,
currentDate.getMonth(),
currentDate.getDate(), 23, 59);
const formattedDate = renewalDate.toISOString().slice(0, 16);
policyInput.max = formattedDate;
policyInput.value = formattedDate;
policyInput.disabled = false;
displayResult.innerHTML = `
<strong>Policy Renewed!</strong><br>
New Expiry: ${formattedDate}<br>
Max Renewal Date: ${policyInput.max}
`;
}
function checkMaxDate() {
const maxDate = policyInput.max;
displayResult.innerHTML = maxDate ?
`Current maximum renewal date: <strong>${maxDate}</strong>` :
"No maximum date set";
}
</script>
</body>
</html>
This example demonstrates how the max property prevents users from selecting dates beyond the allowed renewal period.
Example − Dynamic Max Date Based on Current Date
Following example shows how to dynamically set the max property based on the current date −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Max Date</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Appointment Booking</h2>
<p>Select an appointment within the next 30 days:</p>
<input type="datetime-local" id="appointment">
<button onclick="setNext30Days()">Set Max to 30 Days</button>
<button onclick="setNext7Days()">Set Max to 7 Days</button>
<p id="info"></p>
<script>
const appointmentInput = document.getElementById("appointment");
const info = document.getElementById("info");
// Set initial min to current date/time
const now = new Date();
appointmentInput.min = now.toISOString().slice(0, 16);
function setNext30Days() {
const maxDate = new Date();
maxDate.setDate(maxDate.getDate() + 30);
appointmentInput.max = maxDate.toISOString().slice(0, 16);
info.textContent = `Max date set to: ${appointmentInput.max}`;
}
function setNext7Days() {
const maxDate = new Date();
maxDate.setDate(maxDate.getDate() + 7);
appointmentInput.max = maxDate.toISOString().slice(0, 16);
info.textContent = `Max date set to: ${appointmentInput.max}`;
}
// Set default max to 30 days
setNext30Days();
</script>
</body>
</html>
This example shows how to restrict appointment booking to specific time frames by dynamically updating the max property.
Browser Compatibility
The datetime-local input type and its max property are supported in modern browsers. However, some older browsers may not support this input type and will fall back to a text input. Always test across different browsers when using datetime-local inputs in production applications.
Conclusion
The HTML DOM Input DatetimeLocal max property provides an effective way to restrict user input to a maximum date and time value. It works both as an HTML attribute and a JavaScript property, enabling dynamic control over date selection limits. This property is essential for creating forms with date validation such as booking systems, event schedulers, and policy management applications.
201 Views
