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 Date stepDown() Method
The HTML DOM Input Date stepDown() method decreases the value of a date input field by a specified number of days. This method is useful for programmatically adjusting dates without requiring manual user input.
Syntax
Following is the syntax for the stepDown() method −
inputDateObject.stepDown(number)
Parameters
The stepDown() method accepts the following parameter −
-
number − An optional integer specifying how many days to decrease. If omitted, defaults to 1.
Return Value
The method does not return any value. It directly modifies the value of the date input element.
Example − Basic stepDown Usage
Following example demonstrates the basic usage of the stepDown() method −
<!DOCTYPE html>
<html>
<head>
<title>Input Date stepDown() Method</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Date stepDown() Example</h2>
<form>
<label for="dateSelect">Select Date:</label>
<input type="date" id="dateSelect" value="2024-01-15">
</form>
<br>
<button onclick="changeStep(2)">Decrease by 2 days</button>
<button onclick="changeStep(3)">Decrease by 3 days</button>
<button onclick="resetDate()">Reset Date</button>
<div id="divDisplay" style="margin-top: 10px; font-weight: bold; color: #007acc;"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDate = document.getElementById("dateSelect");
function changeStep(num) {
var oldDate = inputDate.value;
inputDate.stepDown(num);
var newDate = inputDate.value;
divDisplay.textContent = 'Date changed from ' + oldDate + ' to ' + newDate + ' (decreased by ' + num + ' days)';
}
function resetDate() {
inputDate.value = "2024-01-15";
divDisplay.textContent = 'Date reset to 2024-01-15';
}
</script>
</body>
</html>
The output shows a date input field with buttons to decrease the date. Clicking "Decrease by 2 days" reduces the date by 2 days, and "Decrease by 3 days" reduces it by 3 days −
Date stepDown() Example Select Date: [2024-01-15] [Decrease by 2 days] [Decrease by 3 days] [Reset Date] Date changed from 2024-01-15 to 2024-01-13 (decreased by 2 days)
Example − Default Parameter
When no parameter is passed to stepDown(), it decreases the date by 1 day by default −
<!DOCTYPE html>
<html>
<head>
<title>stepDown() Default Parameter</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Default stepDown() Behavior</h2>
<label for="myDate">Current Date:</label>
<input type="date" id="myDate" value="2024-03-10">
<br><br>
<button onclick="decreaseByOne()">Decrease by 1 day (default)</button>
<p id="result" style="margin-top: 10px; color: #d9534f;"></p>
<script>
function decreaseByOne() {
var dateInput = document.getElementById("myDate");
var oldValue = dateInput.value;
dateInput.stepDown(); // No parameter = decrease by 1
var newValue = dateInput.value;
document.getElementById("result").textContent =
"Previous: " + oldValue + " ? Current: " + newValue;
}
</script>
</body>
</html>
The output demonstrates the default behavior of decreasing by 1 day −
Default stepDown() Behavior Current Date: [2024-03-10] [Decrease by 1 day (default)] Previous: 2024-03-10 ? Current: 2024-03-09
Example − Month and Year Boundaries
The stepDown() method handles month and year boundaries correctly −
<!DOCTYPE html>
<html>
<head>
<title>stepDown() Boundary Handling</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Boundary Handling Example</h2>
<label for="boundaryDate">Date (start of month):</label>
<input type="date" id="boundaryDate" value="2024-03-01">
<br><br>
<button onclick="testBoundary()">Decrease by 1 day</button>
<button onclick="resetBoundary()">Reset to March 1st</button>
<div id="boundaryResult" style="margin-top: 10px; padding: 10px; background-color: #f0f8ff; border-left: 4px solid #007acc;"></div>
<script>
function testBoundary() {
var dateInput = document.getElementById("boundaryDate");
var oldDate = new Date(dateInput.value);
dateInput.stepDown(1);
var newDate = new Date(dateInput.value);
document.getElementById("boundaryResult").innerHTML =
"From: " + oldDate.toDateString() + "<br>" +
"To: " + newDate.toDateString() + "<br>" +
"? Automatically moved to previous month";
}
function resetBoundary() {
document.getElementById("boundaryDate").value = "2024-03-01";
document.getElementById("boundaryResult").textContent = "Reset to March 1, 2024";
}
</script>
</body>
</html>
When decreasing from the first day of a month, the method correctly moves to the last day of the previous month −
Boundary Handling Example Date (start of month): [2024-03-01] [Decrease by 1 day] [Reset to March 1st] From: Fri Mar 01 2024 To: Thu Feb 29 2024 ? Automatically moved to previous month
Key Points
-
The
stepDown()method only works with<input type="date">elements. -
If no parameter is provided, the method decreases the date by 1 day by default.
-
The method automatically handles month and year boundaries correctly.
-
Negative numbers can be passed to increase the date (equivalent to
stepUp()). -
The method modifies the input's value directly and triggers change events.
Browser Compatibility
The stepDown() method is supported in all modern browsers that support HTML5 date inputs. However, older browsers may not support the date input type itself, rendering this method ineffective.
Conclusion
The HTML DOM Input Date stepDown() method provides a programmatic way to decrease date values by a specified number of days. It handles date boundaries automatically and is particularly useful for creating date picker interfaces and form validation scripts. The method accepts an optional parameter for the number of days to decrease, defaulting to 1 if not specified.
132 Views
