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 value Property
The HTML DOM Input Time value property is used to get or set the value of an HTML input element with type="time". This property returns a string in the format "HH:MM" (24-hour format) representing the selected time, or allows you to programmatically set a new time value.
Syntax
Following is the syntax for getting the value −
inputTimeObject.value
Following is the syntax for setting the value −
inputTimeObject.value = "HH:MM"
Parameters
-
inputTimeObject − A reference to the HTML input element with
type="time". -
"HH:MM" − A string representing time in 24-hour format where HH is hours (00-23) and MM is minutes (00-59).
Return Value
The property returns a string representing the current time value in "HH:MM" format. If no time is selected, it returns an empty string.
Example − Getting and Setting Time Values
Following example demonstrates how to get and set the value of a time input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Time Value Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Time Input Value Example</h2>
<label for="timeInput">Select Time: </label>
<input type="time" id="timeInput" value="12:30">
<br><br>
<button onclick="getValue()">Get Value</button>
<button onclick="setValue()">Set to 18:45</button>
<button onclick="clearValue()">Clear Value</button>
<p id="result"></p>
<script>
function getValue() {
var timeInput = document.getElementById("timeInput");
var value = timeInput.value;
document.getElementById("result").innerHTML =
value ? "Selected time: " + value : "No time selected";
}
function setValue() {
document.getElementById("timeInput").value = "18:45";
document.getElementById("result").innerHTML = "Time set to 18:45";
}
function clearValue() {
document.getElementById("timeInput").value = "";
document.getElementById("result").innerHTML = "Time value cleared";
}
</script>
</body>
</html>
The output shows a time input field with buttons to demonstrate getting, setting, and clearing the value −
Select Time: [12:30] [Get Value] [Set to 18:45] [Clear Value] (Clicking buttons updates the display and input field accordingly)
Example − Time Guessing Game
Following example creates a simple guessing game where users try to guess the correct event time −
<!DOCTYPE html>
<html>
<head>
<title>Time Guessing Game</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div style="text-align: center; max-width: 400px; margin: 0 auto;">
<h2>Event Time Guessing Game</h2>
<p>Guess at what time the conference starts!</p>
<label for="timeGuess">Your Guess: </label>
<input type="time" id="timeGuess" value="00:00">
<br><br>
<button onclick="checkGuess()" style="padding: 8px 16px;">Submit Guess</button>
<div id="feedback" style="margin-top: 15px; font-weight: bold;">
Make your best guess!
</div>
</div>
<script>
var correctTime = "09:30";
function checkGuess() {
var inputTime = document.getElementById("timeGuess");
var feedback = document.getElementById("feedback");
var userGuess = inputTime.value;
if (userGuess === correctTime) {
feedback.innerHTML = "? Correct! The conference starts at " + userGuess;
feedback.style.color = "green";
} else if (userGuess === "") {
feedback.innerHTML = "Please select a time first!";
feedback.style.color = "orange";
} else {
feedback.innerHTML = "? Not quite right. Try again!";
feedback.style.color = "red";
}
}
</script>
</body>
</html>
The game provides feedback based on whether the user's guess matches the correct time of 09:30 −
Event Time Guessing Game Guess at what time the conference starts! Your Guess: [09:30] [Submit Guess] Make your best guess! (Feedback changes based on correct/incorrect guesses)
Example − Dynamic Time Validation
Following example shows how to validate time input and provide real-time feedback −
<!DOCTYPE html>
<html>
<head>
<title>Time Validation Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Meeting Schedule (9 AM - 5 PM)</h2>
<label for="meetingTime">Select Meeting Time: </label>
<input type="time" id="meetingTime" oninput="validateTime()">
<div id="validation" style="margin-top: 10px;"></div>
<script>
function validateTime() {
var timeInput = document.getElementById("meetingTime");
var validation = document.getElementById("validation");
var selectedTime = timeInput.value;
if (selectedTime === "") {
validation.innerHTML = "";
return;
}
var [hours, minutes] = selectedTime.split(':').map(Number);
var totalMinutes = hours * 60 + minutes;
var startTime = 9 * 60; // 9:00 AM
var endTime = 17 * 60; // 5:00 PM
if (totalMinutes < startTime || totalMinutes > endTime) {
validation.innerHTML = "?? Please select a time between 9:00 AM and 5:00 PM";
validation.style.color = "red";
} else {
validation.innerHTML = "? Valid meeting time selected";
validation.style.color = "green";
}
}
</script>
</body>
</html>
This example validates the selected time in real-time as the user changes the input, ensuring it falls within business hours.
Key Points
-
The value property always returns time in 24-hour format ("HH:MM"), regardless of the browser's display format.
-
Setting an invalid time format will be ignored by the browser.
-
An empty string is returned when no time is selected.
-
The property is case-sensitive and must use the exact "HH:MM" format for setting values.
-
Changes to the value property trigger the
inputandchangeevents.
Browser Compatibility
The Input Time value property is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. However, older versions of Internet Explorer do not support the time input type.
Conclusion
The HTML DOM Input Time value property provides an easy way to get and set time values in web forms. It returns time in standard "HH:MM" format and allows dynamic manipulation of time inputs through JavaScript, making it useful for creating interactive time-based applications and validation systems.
181 Views
