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 step Property
The HTML DOM Input Date step property sets or returns the value of the step attribute of a date input field. This property determines the legal day intervals that users can select when opening the date picker calendar.
Syntax
Following is the syntax for returning the step value −
inputDateObject.step
Following is the syntax for setting the step value −
inputDateObject.step = number
Parameters
The step property accepts a numeric value that represents the number of days between selectable dates. The default value is 1, meaning all dates are selectable. A value of 2 allows selection of every other day, 7 allows weekly intervals, and so on.
Return Value
The step property returns a string representing the current step value of the date input field. If no step attribute is set, it returns an empty string.
Getting the Step Value
Example
Following example demonstrates how to get the step value of a date input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Date Input Step</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Date Input Step Property</h2>
<form>
<label for="dateSelect">Select Date (Every 2 days):</label>
<input type="date" id="dateSelect" step="2">
</form>
<button onclick="getStep()">Get Step Value</button>
<p id="result"></p>
<script>
function getStep() {
var inputDate = document.getElementById("dateSelect");
var stepValue = inputDate.step;
document.getElementById("result").innerHTML = "Current step value: " + stepValue;
}
</script>
</body>
</html>
The output shows the current step value when the button is clicked −
Date Input Step Property Select Date (Every 2 days): [Date Picker] [Get Step Value] Current step value: 2
Setting the Step Value
Example
Following example shows how to dynamically change the step value of a date input −
<!DOCTYPE html>
<html>
<head>
<title>Set Date Input Step</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Change Date Step Dynamically</h2>
<form>
<label for="myDate">Select Date:</label>
<input type="date" id="myDate" step="1">
</form>
<button onclick="setStep(7)">Weekly (Step 7)</button>
<button onclick="setStep(2)">Every 2 Days</button>
<button onclick="setStep(1)">Daily (Step 1)</button>
<p id="display">Current step: 1</p>
<script>
function setStep(stepValue) {
var inputDate = document.getElementById("myDate");
inputDate.step = stepValue;
document.getElementById("display").innerHTML = "Current step: " + inputDate.step;
}
</script>
</body>
</html>
The buttons allow changing between different step intervals −
Change Date Step Dynamically Select Date: [Date Picker] [Weekly (Step 7)] [Every 2 Days] [Daily (Step 1)] Current step: 1 (updates based on button clicked)
Practical Use Cases
The step property is useful in various scenarios −
Weekly scheduling − Set step="7" to allow only weekly date selection
Business days only − Combined with validation, restrict to weekdays
Appointment booking − Allow selection every few days based on availability
Event planning − Restrict dates to specific intervals
Example − Weekly Date Selection
Following example creates a date picker that only allows weekly intervals −
<!DOCTYPE html>
<html>
<head>
<title>Weekly Date Selection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Weekly Appointment Scheduler</h2>
<form>
<label for="appointmentDate">Select Appointment Date (Mondays only):</label>
<input type="date" id="appointmentDate" step="7" value="2024-01-01">
</form>
<button onclick="showSelection()">Show Selected Date</button>
<button onclick="checkStep()">Check Step Setting</button>
<p id="output"></p>
<script>
function showSelection() {
var dateInput = document.getElementById("appointmentDate");
var selectedDate = dateInput.value;
document.getElementById("output").innerHTML = "Selected appointment date: " + selectedDate;
}
function checkStep() {
var dateInput = document.getElementById("appointmentDate");
document.getElementById("output").innerHTML = "Step interval: " + dateInput.step + " days";
}
</script>
</body>
</html>
The date picker restricts selection to 7-day intervals starting from the initial value −
Weekly Appointment Scheduler Select Appointment Date (Mondays only): [Date Picker with 2024-01-01] [Show Selected Date] [Check Step Setting] (Output shows selected date or step interval based on button clicked)
Browser Compatibility
The step property is supported in all modern browsers that support the HTML5 date input type. However, the visual implementation of step restrictions may vary between browsers. Some browsers may show only valid dates in the calendar picker, while others may allow invalid selections but prevent form submission.
Conclusion
The HTML DOM Input Date step property provides a powerful way to control date selection intervals in web forms. By setting appropriate step values, developers can create user-friendly date pickers that guide users to select only valid dates according to business requirements, whether for daily, weekly, or custom interval scheduling.
305 Views
