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 stepUp( ) Method
The HTML DOM Input Week stepUp() method is used to increase the value of a week input field by a specified number of weeks. This method provides a programmatic way to increment the week value without requiring user interaction.
Syntax
Following is the syntax for the stepUp() method −
inputWeekObject.stepUp(number)
Parameters
The stepUp() method accepts the following parameter −
number (optional) − A numeric value that specifies how many weeks to increase the input 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 week input element.
Example − Basic stepUp() Usage
Following example demonstrates the basic usage of the stepUp() method −
<!DOCTYPE html>
<html>
<head>
<title>Input Week stepUp() Basic Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Week Input stepUp() Method</h2>
<label for="weekInput">Select Week: </label>
<input type="week" id="weekInput" value="2024-W10">
<br><br>
<button onclick="increaseByOne()">Increase by 1 Week</button>
<button onclick="increaseByFive()">Increase by 5 Weeks</button>
<br><br>
<p id="result">Current value: 2024-W10</p>
<script>
var weekInput = document.getElementById("weekInput");
var result = document.getElementById("result");
function increaseByOne() {
weekInput.stepUp(); // Default increment by 1
result.textContent = "Current value: " + weekInput.value;
}
function increaseByFive() {
weekInput.stepUp(5);
result.textContent = "Current value: " + weekInput.value;
}
</script>
</body>
</html>
The output shows how the week value increases with each button click −
Initial: Current value: 2024-W10 After "Increase by 1 Week": Current value: 2024-W11 After "Increase by 5 Weeks": Current value: 2024-W16
Example − Advanced stepUp() with Validation
Following example shows the stepUp() method with error handling and validation −
<!DOCTYPE html>
<html>
<head>
<title>Week stepUp() with Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Week stepUp() with Min/Max Constraints</h2>
<label for="constrainedWeek">Week (2024-W01 to 2024-W52): </label>
<input type="week" id="constrainedWeek" value="2024-W45" min="2024-W01" max="2024-W52">
<br><br>
<button onclick="stepUpSafe(1)">+1 Week</button>
<button onclick="stepUpSafe(10)">+10 Weeks</button>
<button onclick="stepUpSafe(25)">+25 Weeks</button>
<br><br>
<p id="status">Ready to increment...</p>
<script>
var constrainedWeek = document.getElementById("constrainedWeek");
var status = document.getElementById("status");
function stepUpSafe(weeks) {
try {
var beforeValue = constrainedWeek.value;
constrainedWeek.stepUp(weeks);
status.innerHTML = "<span style='color: green;'>Success: " + beforeValue + " ? " + constrainedWeek.value + "</span>";
} catch (error) {
status.innerHTML = "<span style='color: red;'>Error: Cannot increase beyond maximum value</span>";
}
}
</script>
</body>
</html>
This example demonstrates how the stepUp() method respects the min and max constraints of the input field.
Initial: Ready to increment... Success case: Success: 2024-W45 ? 2024-W46 Error case: Error: Cannot increase beyond maximum value
Example − Dynamic Step Control
Following example shows how to implement dynamic step control with user input −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Week stepUp()</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Week Step Control</h2>
<label for="dynamicWeek">Current Week: </label>
<input type="week" id="dynamicWeek" value="2024-W20">
<br><br>
<label for="stepAmount">Weeks to add: </label>
<input type="number" id="stepAmount" value="1" min="1" max="52">
<button onclick="customStepUp()">Apply Step</button>
<br><br>
<button onclick="resetWeek()">Reset to 2024-W20</button>
<p id="display">Week: 2024-W20</p>
<script>
var dynamicWeek = document.getElementById("dynamicWeek");
var stepAmount = document.getElementById("stepAmount");
var display = document.getElementById("display");
function customStepUp() {
var steps = parseInt(stepAmount.value) || 1;
dynamicWeek.stepUp(steps);
updateDisplay();
}
function resetWeek() {
dynamicWeek.value = "2024-W20";
updateDisplay();
}
function updateDisplay() {
display.textContent = "Week: " + dynamicWeek.value;
}
</script>
</body>
</html>
This example allows users to specify the exact number of weeks to increment and see the results immediately.
Key Points
The stepUp() method only works on
<input type="week">elements.If the parameter is omitted, the method increases the value by 1 week by default.
The method respects the
minandmaxattributes of the input element.If stepping up would exceed the maximum value, an error is thrown.
Week values follow the format
YYYY-WXXwhere YYYY is the year and XX is the week number (01-53).
Browser Compatibility
The stepUp() method is supported in modern browsers that support HTML5 input types. However, the week input type itself has limited support in some browsers like Safari and Firefox.
Conclusion
The HTML DOM Input Week stepUp() method provides an efficient way to programmatically increment week values in web forms. It handles week arithmetic automatically and respects input constraints, making it ideal for building interactive date/week selection interfaces. Always use error handling when working with constrained inputs to provide a better user experience.
119 Views
