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 min Property
The HTML DOM Input Datetime min property sets or returns the minimum value allowed for a datetime input field. This property corresponds to the min attribute in HTML and helps restrict users from selecting dates and times earlier than the specified minimum value.
Syntax
Following is the syntax to return the min property value −
inputDatetimeObject.min
Following is the syntax to set the min property value −
inputDatetimeObject.min = "YYYY-MM-DDThh:mm:ssTZD"
Property Value
The min property accepts a string value in the format YYYY-MM-DDThh:mm:ssTZD representing a valid datetime. Following table explains each component −
| 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) |
| T | Literal character separating date and time |
| hh | Two-digit hour from 00 to 23 (e.g., 12) |
| mm | Two-digit minutes from 00 to 59 (e.g., 48) |
| ss | Two-digit seconds from 00 to 59 (e.g., 30) |
| TZD | Time Zone Designator (Z for UTC, or ±hh:mm for offset) |
Example − Getting Min Value
Following example demonstrates how to retrieve the minimum datetime value −
<!DOCTYPE html>
<html>
<head>
<title>Get Datetime Min Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Event Registration</h2>
<form>
<label for="eventDateTime">Select Date & Time:</label>
<input type="datetime" id="eventDateTime" name="eventTime"
value="2024-06-15T14:30Z" min="2024-01-01T00:00Z">
</form>
<button onclick="getMinValue()">Get Minimum Value</button>
<p id="result"></p>
<script>
function getMinValue() {
var datetime = document.getElementById("eventDateTime");
var minValue = datetime.min;
document.getElementById("result").innerHTML =
"<strong>Minimum allowed datetime: </strong>" + minValue;
}
</script>
</body>
</html>
The output displays the minimum datetime value when the button is clicked −
Minimum allowed datetime: 2024-01-01T00:00Z
Example − Setting Min Value
Following example shows how to dynamically change the minimum datetime value −
<!DOCTYPE html>
<html>
<head>
<title>Set Datetime Min Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Booking System</h2>
<form>
<label for="bookingDateTime">Select Booking Time:</label>
<input type="datetime" id="bookingDateTime" name="booking"
value="2024-03-15T10:00Z" min="2024-01-01T09:00Z">
</form>
<button onclick="setCurrentMin()">Set Today as Minimum</button>
<button onclick="resetMin()">Reset to Original</button>
<p id="display"><strong>Current minimum: </strong>2024-01-01T09:00Z</p>
<script>
var datetime = document.getElementById("bookingDateTime");
var display = document.getElementById("display");
function setCurrentMin() {
var today = new Date();
var minDate = today.getFullYear() + "-" +
String(today.getMonth() + 1).padStart(2, '0') + "-" +
String(today.getDate()).padStart(2, '0') + "T09:00Z";
datetime.min = minDate;
display.innerHTML = "<strong>Current minimum: </strong>" + datetime.min;
}
function resetMin() {
datetime.min = "2024-01-01T09:00Z";
display.innerHTML = "<strong>Current minimum: </strong>" + datetime.min;
}
</script>
</body>
</html>
The first button sets today's date as the minimum, while the second button resets it to the original value.
Example − Form Validation
Following example demonstrates using the min property for form validation −
<!DOCTYPE html>
<html>
<head>
<title>Datetime Min Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Appointment Scheduler</h2>
<form>
<label for="appointmentTime">Choose Appointment Time:</label>
<input type="datetime" id="appointmentTime" name="appointment"
min="2024-02-01T08:00Z" max="2024-12-31T18:00Z">
</form>
<button onclick="validateDateTime()">Validate Selection</button>
<p id="message"></p>
<script>
function validateDateTime() {
var datetime = document.getElementById("appointmentTime");
var message = document.getElementById("message");
var selectedValue = datetime.value;
var minValue = datetime.min;
if (!selectedValue) {
message.innerHTML = "<span style='color: red;'>Please select a date and time.</span>";
} else if (selectedValue < minValue) {
message.innerHTML = "<span style='color: red;'>Selected time is before minimum allowed: " + minValue + "</span>";
} else {
message.innerHTML = "<span style='color: green;'>Valid appointment time selected: " + selectedValue + "</span>";
}
}
</script>
</body>
</html>
This example validates whether the selected datetime meets the minimum requirement and displays appropriate feedback messages.
Browser Compatibility
Note: The datetime input type has limited browser support and has been deprecated in HTML5 in favor of datetime-local. Most modern browsers support datetime-local instead. Consider using type="datetime-local" for better compatibility.
Conclusion
The HTML DOM Input Datetime min property provides control over the minimum allowable datetime value in datetime input fields. It accepts datetime strings in ISO format and can be both retrieved and modified using JavaScript, making it useful for form validation and dynamic date restrictions.
193 Views
