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 step Property
The HTML DOM Input Week step property sets or returns the legal number intervals for week input fields. This property determines how many weeks the user can step through when using the input controls (like arrow buttons or keyboard navigation).
Syntax
Following is the syntax for returning the step value −
inputWeekObject.step
Following is the syntax for setting the step value −
inputWeekObject.step = number
Parameters
The number parameter accepts the following values −
| Value | Description |
|---|---|
| number | A positive integer specifying the week intervals. Default is 1 (one week at a time). |
| "any" | No restrictions on week intervals (any week can be selected). |
Return Value
The step property returns a string representing the current step interval value for the week input element.
Example − Setting Week Step
Following example demonstrates how to set and get the step property for a week input −
<!DOCTYPE html>
<html>
<head>
<title>Input Week Step Property</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
form {
width: 70%;
margin: 0 auto;
text-align: center;
}
input {
margin: 5px;
padding: 8px;
}
button {
border-radius: 5px;
padding: 8px 12px;
margin: 5px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 15px;
padding: 10px;
background-color: #f0f8ff;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Week Step Example</legend>
<label for="weekInput">Select Week: </label>
<input type="week" id="weekInput" value="2024-W10">
<br><br>
<button type="button" onclick="setStep(2)">Set Step to 2 weeks</button>
<button type="button" onclick="setStep(4)">Set Step to 4 weeks</button>
<button type="button" onclick="getStep()">Get Current Step</button>
<div id="result"></div>
</fieldset>
</form>
<script>
var weekInput = document.getElementById("weekInput");
var result = document.getElementById("result");
function setStep(stepValue) {
weekInput.step = stepValue;
result.innerHTML = "Step set to: " + stepValue + " weeks<br>Now you can navigate by " + stepValue + " week intervals.";
}
function getStep() {
var currentStep = weekInput.step;
result.innerHTML = "Current step value: " + (currentStep || "1 (default)") + " weeks";
}
</script>
</body>
</html>
The output shows how the step property controls the week interval navigation −
Initial: Week input with default step of 1 week After setting step to 2: Navigation occurs in 2-week intervals After setting step to 4: Navigation occurs in 4-week intervals
Example − Interactive Week Stepping
Following example shows how the step property affects user interaction with the week input −
<!DOCTYPE html>
<html>
<head>
<title>Interactive Week Step</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 600px;
margin: 0 auto;
}
.week-container {
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
margin: 10px 0;
}
input[type="week"] {
font-size: 16px;
padding: 8px;
margin: 5px;
}
button {
background-color: #2196F3;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
button:hover {
background-color: #1976D2;
}
.info {
margin-top: 15px;
padding: 10px;
background-color: #e7f3ff;
border-left: 4px solid #2196F3;
}
</style>
</head>
<body>
<h2>Week Input Step Property Demo</h2>
<div class="week-container">
<label for="weekPicker">Choose a week: </label>
<input type="week" id="weekPicker" min="2024-W01" max="2024-W52" value="2024-W20">
<br><br>
<button onclick="changeStep(1)">1 Week Steps</button>
<button onclick="changeStep(2)">2 Week Steps</button>
<button onclick="changeStep(4)">4 Week Steps</button>
<button onclick="resetStep()">Reset to Default</button>
<div class="info" id="stepInfo">
Current step: 1 week (default)
</div>
</div>
<script>
var weekPicker = document.getElementById("weekPicker");
var stepInfo = document.getElementById("stepInfo");
function changeStep(weeks) {
weekPicker.step = weeks;
stepInfo.innerHTML = "Current step: " + weeks + " week" + (weeks > 1 ? "s" : "") +
"<br>Use keyboard arrows or input controls to navigate by " + weeks + " week intervals.";
}
function resetStep() {
weekPicker.removeAttribute("step");
stepInfo.innerHTML = "Current step: 1 week (default)<br>Standard week-by-week navigation restored.";
}
</script>
</body>
</html>
This example demonstrates how different step values affect the week selection behavior. Users can navigate through weeks at the specified intervals using keyboard arrows or input controls.
Week input field with controls to set different step values (1, 2, 4 weeks) Info display showing current step value and navigation behavior
How It Works
The step property works by constraining the valid values that can be selected in the week input field. When a step of 2 is set, only every second week becomes selectable. The browser's built-in validation will prevent users from selecting intermediate weeks that don't match the step interval.
Browser Compatibility
The Input Week step property is supported in modern browsers that support HTML5 week input type. This includes Chrome, Firefox, Edge, and Safari. The step property provides consistent behavior across these browsers for week interval validation.
Conclusion
The HTML DOM Input Week step property controls the legal intervals for week selection in week input fields. By setting different step values, you can restrict user selection to specific week intervals, making it useful for applications that need periodic week-based scheduling or reporting. The default step value is 1, allowing selection of any week.
190 Views
