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 step Property
The HTML DOM Input Time step property sets or returns the legal number intervals for the seconds component of a time input field. This property controls the granularity of time selection, determining which second values are considered valid when users interact with the time picker.
Syntax
Following is the syntax for returning the step value −
inputTimeObject.step
Following is the syntax for setting the step value −
inputTimeObject.step = number
Parameters
The step property accepts numeric values representing seconds −
| Parameter | Description |
|---|---|
| number | A positive number specifying the step interval in seconds. Common values include 1, 5, 10, 15, 20, 30 that divide 60 evenly for smooth minute transitions. |
Return Value
The step property returns a string representing the step interval in seconds. If no step is explicitly set, it returns an empty string, which defaults to 60 seconds (1 minute).
Example − Getting and Setting Step Values
Following example demonstrates how to get and set the step property for a time input −
<!DOCTYPE html>
<html>
<head>
<title>Input Time Step Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Time Input Step Control</h2>
<label for="timeInput">Select Time: </label>
<input type="time" id="timeInput" step="2">
<div style="margin: 15px 0;">
<button onclick="changeStep(5)">Step to 5 seconds</button>
<button onclick="changeStep(10)">Step to 10 seconds</button>
<button onclick="changeStep(30)">Step to 30 seconds</button>
</div>
<p id="display"></p>
<script>
var timeInput = document.getElementById("timeInput");
var display = document.getElementById("display");
// Display initial step value
showCurrentStep();
function changeStep(stepValue) {
timeInput.step = stepValue;
showCurrentStep();
}
function showCurrentStep() {
var currentStep = timeInput.step || "60 (default)";
display.textContent = "Current step interval: " + currentStep + " seconds";
}
</script>
</body>
</html>
The output shows the time input with controllable step intervals. Initially set to 2 seconds, clicking the buttons changes the step granularity −
Time Input Step Control Select Time: [12:34:56] [Step to 5 seconds] [Step to 10 seconds] [Step to 30 seconds] Current step interval: 2 seconds
Example − Validating Step Intervals
Following example shows how different step values affect time input validation and user experience −
<!DOCTYPE html>
<html>
<head>
<title>Time Step Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Time Step Validation Example</h2>
<form>
<div style="margin: 10px 0;">
<label>1-second step: </label>
<input type="time" id="time1" step="1" value="10:30:45">
<span id="step1"></span>
</div>
<div style="margin: 10px 0;">
<label>15-second step: </label>
<input type="time" id="time15" step="15" value="10:30:30">
<span id="step15"></span>
</div>
<div style="margin: 10px 0;">
<label>No step (default): </label>
<input type="time" id="timeDefault" value="10:30:00">
<span id="stepDefault"></span>
</div>
<button type="button" onclick="showAllSteps()">Show All Step Values</button>
</form>
<div id="result" style="margin-top: 15px; padding: 10px; background: #f0f0f0;"></div>
<script>
function showAllSteps() {
var time1 = document.getElementById("time1");
var time15 = document.getElementById("time15");
var timeDefault = document.getElementById("timeDefault");
var result = document.getElementById("result");
result.innerHTML =
"1-second input step: " + time1.step + " seconds<br>" +
"15-second input step: " + time15.step + " seconds<br>" +
"Default input step: '" + timeDefault.step + "' (empty = 60 seconds)";
}
</script>
</body>
</html>
This example demonstrates how different step values control the seconds precision in time inputs −
Time Step Validation Example 1-second step: [10:30:45] 15-second step: [10:30:30] No step (default): [10:30:00] [Show All Step Values] (Clicking button displays:) 1-second input step: 1 seconds 15-second input step: 15 seconds Default input step: '' (empty = 60 seconds)
How It Works
The step property works by constraining which second values are valid in the time input:
step="1" − Allows any second value from 0-59
step="5" − Only allows seconds: 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55
step="30" − Only allows seconds: 0, 30
No step − Defaults to 60 seconds (only :00 seconds, effectively minute precision)
Browser Compatibility
The step property is supported in all modern browsers that support HTML5 time input. However, the visual time picker interface varies between browsers, and some older browsers may not enforce step validation.
Key Points
The step property only affects the seconds component of time inputs.
Values should ideally be divisors of 60 (like 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) for intuitive user experience.
When no step is specified, the default behavior is equivalent to
step="60".The step property affects both user input validation and the behavior of time picker controls.
Setting step to decimal values (like 0.5) is technically valid but may not be supported by all browsers.
Conclusion
The HTML DOM Input Time step property provides fine-grained control over time input precision by setting valid intervals for seconds. Use smaller step values for applications requiring precise time entry, and larger steps for simplified time selection interfaces.
258 Views
