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 stepUp( ) Method
The HTML DOM Input Time stepUp() method is used to increase the value of a time input field by a specified number of minutes. This method provides a programmatic way to increment time values, making it useful for creating time pickers and scheduling interfaces.
Syntax
Following is the syntax for the stepUp() method −
inputTimeObject.stepUp(number)
Parameters
The stepUp() method accepts one optional parameter −
number − An optional integer that specifies the number of minutes to increase the time value. If omitted, the default value is 1.
Return Value
The stepUp() method does not return any value. It directly modifies the value of the time input field.
Example − Basic Usage
Following example demonstrates the basic usage of the stepUp() method with different increment values −
<!DOCTYPE html>
<html>
<head>
<title>Input Time stepUp() Method</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
}
input {
padding: 8px;
margin: 5px;
border-radius: 4px;
border: 1px solid #ccc;
}
input[type="button"] {
background-color: #007bff;
color: white;
cursor: pointer;
}
input[type="button"]:hover {
background-color: #0056b3;
}
#divDisplay {
margin-top: 10px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Time stepUp() Method</legend>
<label for="TimeSelect">Current Time:
<input type="time" id="TimeSelect" value="12:30">
</label>
<br><br>
<input type="button" onclick="changeStep(5)" value="Increase by 5 minutes">
<input type="button" onclick="changeStep(15)" value="Increase by 15 minutes">
<input type="button" onclick="changeStep(30)" value="Increase by 30 minutes">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputTime = document.getElementById("TimeSelect");
function changeStep(minutes) {
var oldTime = inputTime.value;
inputTime.stepUp(minutes);
var newTime = inputTime.value;
divDisplay.innerHTML = 'Increased by ' + minutes + ' minutes<br>Old time: ' + oldTime + ' ? New time: ' + newTime;
}
</script>
</body>
</html>
The output shows time values increasing by the specified number of minutes when buttons are clicked −
Current Time: 12:30 [Increase by 5 minutes] [Increase by 15 minutes] [Increase by 30 minutes] After clicking "Increase by 15 minutes": Increased by 15 minutes Old time: 12:30 ? New time: 12:45
Example − Default Step Value
Following example shows how stepUp() works with no parameter (default increment of 1 minute) −
<!DOCTYPE html>
<html>
<head>
<title>stepUp() Default Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Default Step Increment</h2>
<label for="timeInput">Time: </label>
<input type="time" id="timeInput" value="09:00">
<br><br>
<button onclick="incrementTime()">Step Up (+1 minute)</button>
<button onclick="resetTime()">Reset</button>
<p id="result"></p>
<script>
function incrementTime() {
var timeField = document.getElementById("timeInput");
var oldValue = timeField.value;
timeField.stepUp(); // Default increment of 1 minute
document.getElementById("result").textContent =
"Changed from " + oldValue + " to " + timeField.value;
}
function resetTime() {
document.getElementById("timeInput").value = "09:00";
document.getElementById("result").textContent = "Reset to 09:00";
}
</script>
</body>
</html>
Each click of the "Step Up" button increases the time by exactly 1 minute −
Time: 09:00 [Step Up (+1 minute)] [Reset] After clicking "Step Up" once: Changed from 09:00 to 09:01
Example − Hour Rollover Behavior
Following example demonstrates how stepUp() handles time rollover when minutes exceed 59 −
<!DOCTYPE html>
<html>
<head>
<title>Time Rollover with stepUp()</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Time Rollover Example</h2>
<label for="rolloverTime">Time: </label>
<input type="time" id="rolloverTime" value="23:45">
<br><br>
<button onclick="testRollover(20)">Add 20 minutes</button>
<button onclick="testRollover(30)">Add 30 minutes</button>
<button onclick="resetRollover()">Reset to 23:45</button>
<p id="rolloverResult"></p>
<script>
function testRollover(minutes) {
var timeField = document.getElementById("rolloverTime");
var beforeTime = timeField.value;
timeField.stepUp(minutes);
var afterTime = timeField.value;
document.getElementById("rolloverResult").innerHTML =
"Added " + minutes + " minutes<br>" +
"Before: " + beforeTime + " ? After: " + afterTime;
}
function resetRollover() {
document.getElementById("rolloverTime").value = "23:45";
document.getElementById("rolloverResult").textContent = "Reset to 23:45";
}
</script>
</body>
</html>
When the time exceeds 23:59, it automatically rolls over to the next day starting from 00:00 −
Time: 23:45 [Add 20 minutes] [Add 30 minutes] [Reset to 23:45] After clicking "Add 30 minutes": Added 30 minutes Before: 23:45 ? After: 00:15
Key Points
The stepUp() method increases the time value in minute increments only.
If no parameter is provided, the default increment is 1 minute.
The method automatically handles hour rollover when minutes exceed 59.
Time values that exceed 23:59 roll over to 00:00 the next day.
The method modifies the input field directly and does not return a value.
Negative values can be passed to decrease the time (though stepDown() is more appropriate for this purpose).
Browser Compatibility
The stepUp() method is supported in all modern browsers that support HTML5 time input fields, including Chrome, Firefox, Safari, Edge, and Opera. Internet Explorer 11 and earlier versions do not support time input fields.
Conclusion
The HTML DOM Input Time stepUp() method provides an easy way to programmatically increase time values by specified minute increments. It handles time rollover automatically and is particularly useful for building interactive time selection interfaces and scheduling applications.
158 Views
