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
Selected Reading
HTML DOM Input Time Object
The HTML DOM Input Time Object represents an HTML <input> element with type="time". This object allows users to select a time value and provides JavaScript access to manipulate time input fields programmatically.
Syntax
Following is the syntax to create an input element with type time −
var timeObject = document.createElement("input");
timeObject.type = "time";
To access an existing time input element −
var timeObject = document.getElementById("timeId");
Properties
The Input Time object supports the following properties −
| Property | Description |
|---|---|
| autocomplete | Sets or returns the value of the autocomplete attribute of a time field |
| autofocus | Sets or returns whether the time field should be focused when the page loads |
| defaultValue | Sets or returns the default value of the time field |
| disabled | Sets or returns whether the time field is disabled |
| form | Returns a reference to the form that contains the time field |
| max | Sets or returns the value of the max attribute of the time field |
| min | Sets or returns the value of the min attribute of the time field |
| name | Sets or returns the value of the name attribute of the time field |
| readOnly | Sets or returns whether the time field is read-only |
| required | Sets or returns whether the time field must be filled before submitting the form |
| step | Sets or returns the value of the step attribute of the time field |
| type | Returns the type of form element the time field is |
| value | Sets or returns the value of the value attribute of the time field |
Methods
The Input Time object supports the following methods −
| Method | Description |
|---|---|
| stepDown() | Decrements the time field value by a specified number |
| stepUp() | Increments the time field value by a specified number |
Creating a Time Input Dynamically
Following example demonstrates how to create a time input element dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Creating Time Input Dynamically</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Time Input Creation</h2>
<button onclick="createTimeInput()">Create Time Input</button>
<div id="container"></div>
<script>
function createTimeInput() {
var timeInput = document.createElement("input");
timeInput.type = "time";
timeInput.id = "dynamicTime";
timeInput.value = "09:00";
timeInput.style.margin = "10px";
var label = document.createElement("label");
label.textContent = "Select Time: ";
label.style.display = "block";
label.style.margin = "10px 0";
var container = document.getElementById("container");
container.appendChild(label);
container.appendChild(timeInput);
}
</script>
</body>
</html>
Using stepUp() and stepDown() Methods
Following example shows how to use the stepUp() and stepDown() methods to increment and decrement time values −
<!DOCTYPE html>
<html>
<head>
<title>stepUp and stepDown Methods</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Time Step Methods</h2>
<label for="timeStep">Current Time: </label>
<input type="time" id="timeStep" value="12:00" step="900">
<br><br>
<button onclick="stepUp15()">+15 Minutes</button>
<button onclick="stepDown15()">-15 Minutes</button>
<p id="result"></p>
<script>
function stepUp15() {
var timeInput = document.getElementById("timeStep");
timeInput.stepUp(1); // step is 900 seconds = 15 minutes
document.getElementById("result").textContent = "New time: " + timeInput.value;
}
function stepDown15() {
var timeInput = document.getElementById("timeStep");
timeInput.stepDown(1);
document.getElementById("result").textContent = "New time: " + timeInput.value;
}
</script>
</body>
</html>
Accessing Form Property
Following example demonstrates how to access the form property of a time input element −
<!DOCTYPE html>
<html>
<head>
<title>Input Time form Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="Physics">
<fieldset style="padding: 15px; border: 2px solid #ccc;">
<legend>Time-form</legend>
<label for="TimeSelect">Examination Time:
<input type="time" id="TimeSelect" value="14:00" disabled style="margin-left: 10px;">
</label>
<br><br>
<input type="button" onclick="getform()" value="Which Exam?" style="padding: 8px 15px; border-radius: 5px;">
<div id="divDisplay" style="margin-top: 15px; font-weight: bold; color: #007bff;"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputTime = document.getElementById("TimeSelect");
function getform() {
divDisplay.textContent = inputTime.form.id + ' exam starts from ' + inputTime.value;
}
</script>
</body>
</html>
The output displays the form ID and the selected time when the button is clicked −
Before clicking: Time input shows "14:00" and button shows "Which Exam?" After clicking: "Physics exam starts from 14:00"
Setting Min and Max Values
Following example demonstrates how to set minimum and maximum time values −
<!DOCTYPE html>
<html>
<head>
<title>Time Input with Min/Max</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Office Hours Time Selection</h2>
<label for="workTime">Select Work Time (9 AM - 5 PM): </label>
<input type="time" id="workTime" min="09:00" max="17:00" value="12:00">
<br><br>
<button onclick="checkTime()">Validate Time</button>
<p id="validation"></p>
<script>
function checkTime() {
var timeInput = document.getElementById("workTime");
var selectedTime = timeInput.value;
var minTime = timeInput.min;
var maxTime = timeInput.max;
if (selectedTime >= minTime && selectedTime <= maxTime) {
document.getElementById("validation").textContent = "Time " + selectedTime + " is within office hours.";
document.getElementById("validation").style.color = "green";
} else {
document.getElementById("validation").textContent = "Please select a time between " + minTime + " and " + maxTime;
document.getElementById("validation").style.color = "red";
}
}
</script>
</body>
</html>
Conclusion
The HTML DOM Input Time Object provides comprehensive control over time input elements through properties like value, min, max, and methods like stepUp() and stepDown(). It enables dynamic creation of time inputs and validation of time values within specified ranges, making it essential for time-based form interactions in web applications.
Updated on: 2026-03-16T21:38:54+05:30
240 Views
Advertisements