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 min Property
The HTML DOM Input DatetimeLocal min property sets or returns the minimum value for a datetime-local input field. This property corresponds to the HTML min attribute and restricts users from selecting dates and times earlier than the specified minimum value.
Syntax
Following is the syntax for returning the min property −
inputDatetimeLocalObject.min
Following is the syntax for setting the min property −
inputDatetimeLocalObject.min = "YYYY-MM-DDThh:mm:ss"
Parameters
The min property accepts a string value in the format YYYY-MM-DDThh:mm:ss representing the minimum allowable datetime −
| Component | Description |
|---|---|
| YYYY | Four-digit year (e.g., 2023) |
| MM | Two-digit month (01-12, e.g., 07 for July) |
| DD | Two-digit day of the month (01-31, e.g., 15) |
| T | Literal separator character between date and time |
| 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, optional, e.g., 45) |
Return Value
The min property returns a string representing the minimum datetime value, or an empty string if no minimum is set.
Example − Getting the Min Value
Following example demonstrates how to retrieve the minimum value of a datetime-local input −
<!DOCTYPE html>
<html>
<head>
<title>Get DatetimeLocal Min Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Datetime Local Min Property</h2>
<label for="datetime1">Select Date and Time:</label>
<input type="datetime-local" id="datetime1" value="2023-06-15T14:30" min="2023-01-01T00:00">
<br><br>
<button onclick="getMinValue()">Get Minimum Value</button>
<p id="result"></p>
<script>
function getMinValue() {
var input = document.getElementById("datetime1");
var minValue = input.min;
document.getElementById("result").textContent = "Minimum allowed value: " + minValue;
}
</script>
</body>
</html>
The output displays the minimum allowed datetime value when the button is clicked −
Minimum allowed value: 2023-01-01T00:00
Example − Setting the Min Value
Following example shows how to dynamically set the minimum value using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Set DatetimeLocal Min Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Set Minimum DateTime Dynamically</h2>
<label for="datetime2">Appointment Date:</label>
<input type="datetime-local" id="datetime2">
<br><br>
<button onclick="setCurrentMin()">Set Min to Current DateTime</button>
<button onclick="setCustomMin()">Set Min to Tomorrow 9 AM</button>
<p id="status"></p>
<script>
function setCurrentMin() {
var input = document.getElementById("datetime2");
var now = new Date();
var currentDateTime = now.getFullYear() + "-" +
String(now.getMonth() + 1).padStart(2, '0') + "-" +
String(now.getDate()).padStart(2, '0') + "T" +
String(now.getHours()).padStart(2, '0') + ":" +
String(now.getMinutes()).padStart(2, '0');
input.min = currentDateTime;
document.getElementById("status").textContent = "Min set to: " + currentDateTime;
}
function setCustomMin() {
var input = document.getElementById("datetime2");
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var tomorrowDateTime = tomorrow.getFullYear() + "-" +
String(tomorrow.getMonth() + 1).padStart(2, '0') + "-" +
String(tomorrow.getDate()).padStart(2, '0') + "T09:00";
input.min = tomorrowDateTime;
document.getElementById("status").textContent = "Min set to: " + tomorrowDateTime;
}
</script>
</body>
</html>
This example allows you to set the minimum value dynamically. Try selecting a date earlier than the minimum − the browser will prevent invalid selections.
Example − Validation with Min Property
Following example demonstrates form validation using the min property −
<!DOCTYPE html>
<html>
<head>
<title>DatetimeLocal Min Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Booking Form</h2>
<form onsubmit="return validateBooking(event)">
<label for="eventTime">Event Date & Time:</label>
<input type="datetime-local" id="eventTime" min="2023-07-01T09:00" required>
<br><br>
<button type="submit">Book Event</button>
</form>
<p id="message" style="color: red;"></p>
<script>
function validateBooking(event) {
event.preventDefault();
var input = document.getElementById("eventTime");
var selectedValue = input.value;
var minValue = input.min;
var messageElement = document.getElementById("message");
if (selectedValue < minValue) {
messageElement.textContent = "Please select a date/time after " + minValue;
return false;
} else {
messageElement.style.color = "green";
messageElement.textContent = "Booking confirmed for: " + selectedValue;
return true;
}
}
</script>
</body>
</html>
This form prevents users from booking events before the specified minimum datetime and provides feedback on validation.
Key Points
The min property enforces client-side validation, preventing users from selecting invalid datetimes
The datetime format must be exact:
YYYY-MM-DDThh:mm:ssorYYYY-MM-DDThh:mmSetting min to an empty string removes the minimum constraint
The property returns an empty string if no minimum value is set
Changes to the min property immediately affect the input field's validation behavior
Browser Compatibility
The datetime-local input type and its min property are supported in modern browsers including Chrome, Firefox, Safari, and Edge. Internet Explorer does not support the datetime-local input type.
Conclusion
The HTML DOM Input DatetimeLocal min property provides an effective way to set minimum datetime constraints for user input. It enables both client-side validation and dynamic minimum value updates, making it useful for appointment booking, event scheduling, and other time-sensitive forms where past dates should be restricted.
220 Views
