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 max Property
The HTML DOM Input Time max property sets or returns the value of the max attribute of a time input field. This property defines the maximum time value that a user can enter in the time input field.
Syntax
Following is the syntax for returning the max property value −
inputTimeObject.max
Following is the syntax for setting the max property value −
inputTimeObject.max = "hh:mm:ss.ms"
Property Values
The max property accepts a string value representing time in the format hh:mm:ss.ms. Here are the components −
| Component | Description |
|---|---|
| hh | Hours in 24-hour format (00-23), e.g., 18 |
| mm | Minutes (00-59), e.g., 59 |
| ss | Seconds (00-59), e.g., 00 |
| ms | Milliseconds (000-999), e.g., 700 |
Return Value
The max property returns a string representing the maximum time value allowed for the input field. If no max attribute is set, it returns an empty string.
Example − Setting and Getting Max Property
Following example demonstrates how to set and get the max property of a time input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Time max Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Time Input Max Property</h2>
<label for="timeInput">Select Time:</label>
<input type="time" id="timeInput" value="12:00">
<br><br>
<button onclick="setMax()">Set Max to 18:30</button>
<button onclick="getMax()">Get Max Value</button>
<button onclick="clearMax()">Clear Max</button>
<p id="result"></p>
<script>
function setMax() {
var timeInput = document.getElementById("timeInput");
timeInput.max = "18:30";
document.getElementById("result").innerHTML = "Max time set to: 18:30";
}
function getMax() {
var timeInput = document.getElementById("timeInput");
var maxValue = timeInput.max;
if (maxValue) {
document.getElementById("result").innerHTML = "Current max time: " + maxValue;
} else {
document.getElementById("result").innerHTML = "No max time is set";
}
}
function clearMax() {
var timeInput = document.getElementById("timeInput");
timeInput.max = "";
document.getElementById("result").innerHTML = "Max time cleared";
}
</script>
</body>
</html>
Example − Time Validation with Max Property
Following example shows how to use the max property for time validation −
<!DOCTYPE html>
<html>
<head>
<title>Time Validation Example</title>
<style>
.container {
max-width: 500px;
margin: 20px auto;
padding: 20px;
font-family: Arial, sans-serif;
text-align: center;
}
.result {
margin-top: 15px;
padding: 10px;
border-radius: 5px;
}
.valid { background-color: #d4edda; color: #155724; }
.invalid { background-color: #f8d7da; color: #721c24; }
</style>
</head>
<body>
<div class="container">
<h2>Meeting Time Scheduler</h2>
<label for="meetingTime">Select Meeting Time:</label>
<input type="time" id="meetingTime" value="09:00" max="17:00">
<br><br>
<button onclick="validateTime()">Validate Time</button>
<div id="output" class="result">Maximum allowed time: 17:00</div>
</div>
<script>
function validateTime() {
var timeInput = document.getElementById("meetingTime");
var output = document.getElementById("output");
var selectedTime = timeInput.value;
var maxTime = timeInput.max;
if (selectedTime <= maxTime) {
output.className = "result valid";
output.innerHTML = "? Meeting scheduled at " + selectedTime + " (within office hours)";
} else {
output.className = "result invalid";
output.innerHTML = "? Invalid time! Office hours end at " + maxTime;
}
}
</script>
</body>
</html>
Example − Dynamic Max Time Setting
Following example demonstrates dynamically changing the max property based on user selection −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Max Time</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Appointment Booking</h2>
<label for="dayType">Select Day Type:</label>
<select id="dayType" onchange="updateMaxTime()">
<option value="weekday">Weekday</option>
<option value="weekend">Weekend</option>
</select>
<br><br>
<label for="appointmentTime">Appointment Time:</label>
<input type="time" id="appointmentTime" value="10:00" max="18:00">
<br><br>
<p id="info">Weekday appointments: 8:00 AM - 6:00 PM</p>
<script>
function updateMaxTime() {
var dayType = document.getElementById("dayType").value;
var timeInput = document.getElementById("appointmentTime");
var info = document.getElementById("info");
if (dayType === "weekday") {
timeInput.max = "18:00";
timeInput.min = "08:00";
info.innerHTML = "Weekday appointments: 8:00 AM - 6:00 PM (Max: " + timeInput.max + ")";
} else {
timeInput.max = "15:00";
timeInput.min = "10:00";
info.innerHTML = "Weekend appointments: 10:00 AM - 3:00 PM (Max: " + timeInput.max + ")";
}
}
</script>
</body>
</html>
Browser Compatibility
The max property for time input fields is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. However, older versions of Internet Explorer do not support the time input type and this property.
Key Points
-
The max property accepts time values in
hh:mmorhh:mm:ssformat. -
If no max attribute is set, the property returns an empty string.
-
Setting max to an empty string removes the maximum time restriction.
-
The browser automatically validates user input against the max value.
-
You can use JavaScript to programmatically validate time values against the max property.
Conclusion
The HTML DOM Input Time max property provides an effective way to set and retrieve the maximum allowed time value for time input fields. This property is essential for creating time-based forms with proper validation, ensuring users can only select times within acceptable ranges.
193 Views
