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 Time min Property
The HTML DOM Input Time min property sets or returns the value of the min attribute of an HTML time input field. This property defines the minimum time value that a user can enter, providing validation to ensure the selected time meets the required criteria.
Syntax
Following is the syntax for getting the min property value −
inputTimeObject.min
Following is the syntax for setting the min property value −
inputTimeObject.min = "hh:mm:ss.ms"
Property Values
The min property accepts a time string in the format "hh:mm:ss.ms". The following table describes each component −
| Component | Description | Example |
|---|---|---|
hh |
Hours in 24-hour format (00-23) | 18 (6 PM) |
mm |
Minutes (00-59) | 30 |
ss |
Seconds (00-59) - optional | 15 |
ms |
Milliseconds (000-999) - optional | 500 |
Note − The most common format is "hh:mm" (e.g., "09:30"). The seconds and milliseconds are optional and rarely used in typical time inputs.
Return Value
The property returns a string representing the minimum time value, or an empty string if no minimum time is set.
Example − Setting and Getting Min Time
Following example demonstrates how to set and retrieve the min property of a time input −
<!DOCTYPE html>
<html>
<head>
<title>Input Time min Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Time Input with Minimum Value</h3>
<label for="meetingTime">Select meeting time:</label>
<input type="time" id="meetingTime" value="09:00" min="08:30">
<br><br>
<button onclick="getMinTime()">Get Min Time</button>
<button onclick="setMinTime()">Set Min Time to 10:00</button>
<p id="result"></p>
<script>
function getMinTime() {
var timeInput = document.getElementById("meetingTime");
document.getElementById("result").innerHTML = "Current min time: " + timeInput.min;
}
function setMinTime() {
var timeInput = document.getElementById("meetingTime");
timeInput.min = "10:00";
document.getElementById("result").innerHTML = "Min time updated to: " + timeInput.min;
}
</script>
</body>
</html>
The output shows how the min property can be read and modified dynamically −
Time Input with Minimum Value Select meeting time: [09:00] (time picker) [Get Min Time] [Set Min Time to 10:00] Current min time: 08:30 (when Get Min Time is clicked)
Example − Time Validation with Min Property
Following example demonstrates practical usage of the min property for time validation −
<!DOCTYPE html>
<html>
<head>
<title>Time Validation Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div style="max-width: 400px; margin: 0 auto; text-align: center;">
<h3>Exam Hall Exit Time</h3>
<label for="exitTime">Time spent in exam hall:</label>
<input type="time" id="exitTime" value="00:30" min="01:30">
<br><br>
<button onclick="checkExitTime()" style="padding: 8px 16px; border-radius: 5px;">Check Exit Permission</button>
<div id="message" style="margin-top: 20px; padding: 10px; border-radius: 5px;"></div>
</div>
<script>
var timeInput = document.getElementById("exitTime");
var messageDiv = document.getElementById("message");
// Display initial minimum time
messageDiv.innerHTML = "Minimum required time: " + timeInput.min;
messageDiv.style.backgroundColor = "#e7f3ff";
function checkExitTime() {
var selectedTime = timeInput.value;
var minTime = timeInput.min;
if (selectedTime >= minTime) {
messageDiv.innerHTML = "? You can leave the exam hall. Time spent: " + selectedTime;
messageDiv.style.backgroundColor = "#d4edda";
messageDiv.style.color = "#155724";
} else {
messageDiv.innerHTML = "? You must wait until minimum time: " + minTime;
messageDiv.style.backgroundColor = "#f8d7da";
messageDiv.style.color = "#721c24";
}
}
</script>
</body>
</html>
This example validates whether the selected time meets the minimum requirement before allowing the action −
Exam Hall Exit Time Time spent in exam hall: [00:30] (time picker) [Check Exit Permission] ? You must wait until minimum time: 01:30 (red background when time is below minimum)
Example − Dynamic Min Time Updates
Following example shows how the min property can be updated based on other form inputs −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Min Time</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Appointment Booking System</h3>
<label for="appointmentType">Appointment Type:</label>
<select id="appointmentType" onchange="updateMinTime()">
<option value="consultation">Consultation (9 AM earliest)</option>
<option value="surgery">Surgery (1 PM earliest)</option>
<option value="checkup">Check-up (8 AM earliest)</option>
</select>
<br><br>
<label for="appointmentTime">Select time:</label>
<input type="time" id="appointmentTime" min="09:00">
<p id="info">Minimum time for consultation: 09:00</p>
<script>
function updateMinTime() {
var typeSelect = document.getElementById("appointmentType");
var timeInput = document.getElementById("appointmentTime");
var infoText = document.getElementById("info");
var minTimes = {
"consultation": "09:00",
"surgery": "13:00",
"checkup": "08:00"
};
var selectedType = typeSelect.value;
timeInput.min = minTimes[selectedType];
timeInput.value = minTimes[selectedType]; // Set default to minimum
infoText.innerHTML = "Minimum time for " + selectedType + ": " + minTimes[selectedType];
}
</script>
</body>
</html>
The min time automatically updates when a different appointment type is selected, ensuring valid time selection for each category.
Browser Compatibility
The Input Time min property is supported in modern browsers that support HTML5 time input fields. Always include fallback validation for older browsers that may not enforce the min constraint automatically.
Conclusion
The HTML DOM Input Time min property provides an essential way to set minimum time constraints on time input fields. It enables both client-side validation and dynamic time restrictions, making it valuable for appointment booking, scheduling systems, and any application requiring time-based validation.
206 Views
