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 Week stepDown( ) Method
The HTML DOM Input Week stepDown() method decreases the value of a week input field by a specified number of weeks. This method is useful for programmatically adjusting week values without direct user input manipulation.
Syntax
Following is the syntax for the stepDown() method −
inputWeekObject.stepDown(number)
Parameters
The stepDown() method accepts the following parameter −
number (optional) − A numeric value representing the number of weeks to decrease. If not specified, the default value is 1.
Return Value
The method does not return any value. It directly modifies the value of the input week element.
Example − Basic Usage
Following example demonstrates the basic usage of the stepDown() method with week input −
<!DOCTYPE html>
<html>
<head>
<title>Input Week stepDown() Method</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Week Input stepDown() Example</h2>
<label for="weekInput">Select Week: </label>
<input type="week" id="weekInput" value="2024-W20">
<br><br>
<button onclick="decreaseByOne()">Decrease by 1 Week</button>
<button onclick="decreaseByThree()">Decrease by 3 Weeks</button>
<br><br>
<p id="result">Current Value: 2024-W20</p>
<script>
var weekInput = document.getElementById("weekInput");
var result = document.getElementById("result");
function decreaseByOne() {
weekInput.stepDown();
result.textContent = "Current Value: " + weekInput.value;
}
function decreaseByThree() {
weekInput.stepDown(3);
result.textContent = "Current Value: " + weekInput.value;
}
</script>
</body>
</html>
The output shows the week input field with buttons that decrease the week value −
Week Input stepDown() Example Select Week: [2024-W20] [Decrease by 1 Week] [Decrease by 3 Weeks] Current Value: 2024-W20 (After clicking "Decrease by 1 Week": Current Value: 2024-W19) (After clicking "Decrease by 3 Weeks": Current Value: 2024-W17)
Example − Interactive Week Selector
Following example creates an interactive week selector with multiple step options −
<!DOCTYPE html>
<html>
<head>
<title>Interactive Week Selector</title>
<style>
.container {
width: 80%;
margin: 0 auto;
text-align: center;
padding: 20px;
}
.week-input {
font-size: 16px;
padding: 8px;
margin: 10px;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: #45a049;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="container">
<h2>Week Selector with stepDown()</h2>
<label for="weekSelector">Current Week: </label>
<input type="week" id="weekSelector" class="week-input" value="2024-W25">
<br><br>
<button class="btn" onclick="stepDown(1)">-1 Week</button>
<button class="btn" onclick="stepDown(2)">-2 Weeks</button>
<button class="btn" onclick="stepDown(4)">-4 Weeks</button>
<button class="btn" onclick="stepDown(12)">-12 Weeks</button>
<br><br>
<p id="display">Selected Week: 2024-W25</p>
</div>
<script>
var weekSelector = document.getElementById("weekSelector");
var display = document.getElementById("display");
function stepDown(weeks) {
weekSelector.stepDown(weeks);
display.textContent = "Selected Week: " + weekSelector.value;
}
// Update display when user changes input manually
weekSelector.addEventListener("input", function() {
display.textContent = "Selected Week: " + weekSelector.value;
});
</script>
</body>
</html>
This example provides multiple buttons to decrease the week value by different amounts and displays the current selection −
Week Selector with stepDown() Current Week: [2024-W25] [-1 Week] [-2 Weeks] [-4 Weeks] [-12 Weeks] Selected Week: 2024-W25
How It Works
The stepDown() method works by −
Taking the current value of the week input field
Subtracting the specified number of weeks from it
Updating the input field with the new week value
Respecting any
minattribute constraints on the input field
If the resulting value would be less than the min attribute value, the method will set the input to the minimum allowed value instead.
Browser Compatibility
The stepDown() method is supported in modern browsers that support the HTML5 week input type. This includes Chrome, Firefox, Safari, and Edge. Internet Explorer does not support the week input type or this method.
Conclusion
The HTML DOM Input Week stepDown() method provides a programmatic way to decrease week values in week input fields. It accepts an optional parameter to specify how many weeks to decrease and respects minimum value constraints, making it useful for creating interactive date navigation interfaces.
146 Views
