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 DatetimeLocal stepDown( ) Method
The HTML DOM Input DatetimeLocal stepDown() method decreases the value of a datetime-local input field by a specified number of minutes. This method is useful for programmatically adjusting datetime values in incremental steps.
Syntax
Following is the syntax for the stepDown() method −
inputDatetimeLocalObject.stepDown(number)
Parameters
The stepDown() method accepts one optional parameter −
- number − An integer that specifies how many minutes to decrease the value by. If omitted, the default value is 1.
Return Value
This method does not return any value. It directly modifies the value of the datetime-local input field.
Example
Let us see an example of Input DatetimeLocal stepDown() method −
<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal stepDown()</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
input {
padding: 8px;
margin: 5px;
font-size: 14px;
}
input[type="button"] {
border-radius: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
input[type="button"]:hover {
background-color: #45a049;
}
#divDisplay {
margin-top: 15px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Datetime-Local stepDown() Method</legend>
<label for="datetimeLocalSelect">Local Date Time:</label><br>
<input type="datetime-local" id="datetimeLocalSelect" value="2010-12-21T23:50"><br>
<input type="button" onclick="changeStep(1)" value="Decrease by 1 minute">
<input type="button" onclick="changeStep(10)" value="Decrease by 10 minutes">
<input type="button" onclick="changeStep(25)" value="Decrease by 25 minutes">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
function changeStep(myStepDown) {
var previousValue = inputDatetimeLocal.value;
inputDatetimeLocal.stepDown(myStepDown);
var currentValue = inputDatetimeLocal.value;
divDisplay.innerHTML = 'Previous: ' + previousValue + '<br>Current: ' + currentValue + '<br>Decreased by: ' + myStepDown + ' minutes';
}
</script>
</body>
</html>
The output of the above code is −
Initial datetime: 2010-12-21T23:50 After clicking "Decrease by 10 minutes": 2010-12-21T23:40 After clicking "Decrease by 25 minutes": 2010-12-21T23:15
Using Default Step Value
When no parameter is passed to stepDown(), it decreases the datetime by 1 minute (the default step value) −
<!DOCTYPE html>
<html>
<head>
<title>stepDown() with Default Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Default stepDown() Example</h3>
<label for="datetime1">Select DateTime:</label>
<input type="datetime-local" id="datetime1" value="2024-03-15T14:30"><br><br>
<button onclick="stepDownDefault()">Step Down (Default)</button>
<p id="result"></p>
<script>
function stepDownDefault() {
var datetimeInput = document.getElementById("datetime1");
var oldValue = datetimeInput.value;
datetimeInput.stepDown(); // No parameter - uses default of 1
document.getElementById("result").innerHTML =
"Old: " + oldValue + "<br>New: " + datetimeInput.value + " (decreased by 1 minute)";
}
</script>
</body>
</html>
The output shows the datetime decreasing by 1 minute each time the button is clicked −
Old: 2024-03-15T14:30 New: 2024-03-15T14:29 (decreased by 1 minute)
How It Works
The stepDown() method works by −
- Taking the current value of the datetime-local input field
- Subtracting the specified number of minutes from the current datetime
- Updating the input field with the new datetime value
- If no parameter is provided, it defaults to decreasing by 1 minute
Note − The method will not decrease the value below the minimum value if the min attribute is set on the input element. Similarly, it respects the step attribute if specified.
Conclusion
The stepDown() method provides a convenient way to programmatically decrease datetime-local input values by specified minute intervals. It accepts an optional numeric parameter (defaulting to 1) and directly modifies the input field's value, making it useful for creating increment/decrement controls in datetime interfaces.
116 Views
