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 min Property
The HTML DOM Input Date min property is used to get or set the minimum allowable date for an HTML input element of type "date". This property corresponds to the min attribute in the HTML and restricts users from selecting dates earlier than the specified minimum date.
Syntax
Following is the syntax for getting the min property −
inputDateObject.min
Following is the syntax for setting the min property −
inputDateObject.min = "YYYY-MM-DD"
Parameters
The min property accepts a string value in the format YYYY-MM-DD, where each component represents −
| Component | Description |
|---|---|
| YYYY | Four-digit year (e.g., 2023, 1998) |
| MM | Two-digit month from 01 to 12 (e.g., 05 for May, 12 for December) |
| DD | Two-digit day from 01 to 31 (e.g., 24, 07) |
Return Value
The min property returns a string representing the minimum date in YYYY-MM-DD format, or an empty string if no minimum date is set.
Example − Getting and Setting Min Date
Following example demonstrates how to get and modify the min property of a date input −
<!DOCTYPE html>
<html>
<head>
<title>Input Date Min Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Date Selection with Min Constraint</h2>
<form>
<label for="date">Select Date: </label>
<input type="date" id="date" name="DateSelect" min="2000-01-01">
</form>
<br>
<button onclick="changeMinDate()">Change Min Date to 1998-07-01</button>
<button onclick="getMinDate()">Display Current Min Date</button>
<div id="display" style="margin-top: 15px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
var inputDate = document.getElementById("date");
var display = document.getElementById("display");
// Display initial min date
display.textContent = 'Initial Min Date: ' + inputDate.min;
function changeMinDate() {
inputDate.min = '1998-07-01';
display.textContent = 'Min Date changed to: ' + inputDate.min;
}
function getMinDate() {
display.textContent = 'Current Min Date: ' + inputDate.min;
}
</script>
</body>
</html>
Initially, the date input has a minimum date of January 1, 2000. Clicking "Change Min Date" updates it to July 1, 1998 −
Initial Min Date: 2000-01-01 After clicking "Change Min Date": Min Date changed to: 1998-07-01
Example − Dynamic Min Date Based on Current Date
Following example sets the minimum date to today's date, preventing users from selecting past dates −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Min Date</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Appointment Booking (No Past Dates)</h2>
<form>
<label for="appointment">Select Appointment Date: </label>
<input type="date" id="appointment" name="appointmentDate">
</form>
<p id="info" style="margin-top: 10px; color: #666;"></p>
<script>
var appointmentInput = document.getElementById("appointment");
var info = document.getElementById("info");
// Get today's date in YYYY-MM-DD format
var today = new Date();
var todayString = today.getFullYear() + '-' +
String(today.getMonth() + 1).padStart(2, '0') + '-' +
String(today.getDate()).padStart(2, '0');
// Set min date to today
appointmentInput.min = todayString;
info.textContent = 'Minimum selectable date: ' + todayString;
</script>
</body>
</html>
This dynamically sets the minimum date to the current date, ensuring users cannot select past dates for appointments.
Minimum selectable date: 2024-01-15 (example current date)
Example − Date Range with Min and Max
Following example demonstrates using both min and max properties to create a date range −
<!DOCTYPE html>
<html>
<head>
<title>Date Range Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Registration (Limited Date Range)</h2>
<form>
<label for="eventDate">Select Event Date: </label>
<input type="date" id="eventDate" name="eventDate" min="2024-06-01" max="2024-06-30">
</form>
<br>
<button onclick="showDateRange()">Show Allowed Date Range</button>
<div id="rangeDisplay" style="margin-top: 15px; padding: 10px; background-color: #e8f4fd;"></div>
<script>
function showDateRange() {
var eventInput = document.getElementById("eventDate");
var display = document.getElementById("rangeDisplay");
display.innerHTML = '<strong>Allowed Date Range:</strong><br>' +
'From: ' + eventInput.min + '<br>' +
'To: ' + eventInput.max;
}
</script>
</body>
</html>
This example restricts date selection to June 2024 only, useful for event registration with specific date constraints.
Allowed Date Range: From: 2024-06-01 To: 2024-06-30
Browser Compatibility
The Input Date min property is supported by all modern browsers including Chrome, Firefox, Safari, and Edge. However, older browsers may not support the date input type and will fall back to a text input.
Key Points
-
The min property accepts dates in
YYYY-MM-DDformat only. -
Users cannot select dates earlier than the specified minimum date in the date picker.
-
Setting an invalid date format will be ignored by the browser.
-
The property returns an empty string if no minimum date is set.
-
Use with the
maxproperty to create date ranges.
Conclusion
The HTML DOM Input Date min property provides an effective way to restrict date selection by setting a minimum allowable date. It helps create user-friendly forms with proper date validation, whether for preventing past date selection, creating appointment systems, or defining specific date ranges for events.
207 Views
