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 Month step Property
The HTML DOM Input Month step property is used to get or set the value of the step attribute for an input element of type month. The step attribute specifies the legal number intervals for month values, controlling how the month picker increments or decrements when using the arrow controls.
When you set a step value, the month input will only accept values that are multiples of that step from the minimum value. For example, with step="3", the input will increment by 3 months at a time.
Syntax
Following is the syntax for returning the step value −
object.step
Following is the syntax for setting the step value −
object.step = "number"
The number parameter represents a positive number that defines the stepping interval for the month input.
Return Value
The property returns a string representing the step value of the month input field. If no step attribute is specified, it returns an empty string.
Example − Setting and Getting Step Property
Following example demonstrates how to set and retrieve the step property for a month input field −
<!DOCTYPE html>
<html>
<head>
<title>DOM Input Month Step Property</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
input {
padding: 8px;
margin: 10px;
font-size: 16px;
}
button {
padding: 8px 15px;
margin: 5px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
}
.output {
margin: 20px;
font-size: 18px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<h2>DOM Input Month Step Property Demo</h2>
<p>Select a month and try the step controls:</p>
<input type="month" id="monthInput" value="2024-01">
<br>
<button onclick="setStep()">Set Step = 2</button>
<button onclick="getStep()">Get Step Value</button>
<button onclick="resetStep()">Reset Step</button>
<div id="output" class="output"></div>
<script>
function setStep() {
var monthInput = document.getElementById("monthInput");
monthInput.step = "2";
document.getElementById("output").innerHTML = "Step set to 2 months";
}
function getStep() {
var monthInput = document.getElementById("monthInput");
var stepValue = monthInput.step;
document.getElementById("output").innerHTML = "Current step value: " + (stepValue || "1 (default)");
}
function resetStep() {
var monthInput = document.getElementById("monthInput");
monthInput.step = "";
document.getElementById("output").innerHTML = "Step reset to default";
}
</script>
</body>
</html>
The output shows a month input with controls to set, get, and reset the step value −
DOM Input Month Step Property Demo Select a month and try the step controls: [2024-01] (month picker) [Set Step = 2] [Get Step Value] [Reset Step] Current step value: 2
Example − Different Step Values
Following example demonstrates how different step values affect month selection −
<!DOCTYPE html>
<html>
<head>
<title>Month Step Values Comparison</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.demo-box {
border: 1px solid #ccc;
padding: 15px;
margin: 10px;
border-radius: 5px;
text-align: center;
}
input {
padding: 5px;
margin: 5px;
}
button {
padding: 5px 10px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Different Step Values for Month Input</h2>
<div class="container">
<div class="demo-box">
<h3>Step = 1 (Default)</h3>
<input type="month" id="month1" value="2024-01">
<button onclick="showStep('month1')">Show Step</button>
<div id="result1"></div>
</div>
<div class="demo-box">
<h3>Step = 3</h3>
<input type="month" id="month2" value="2024-01" step="3">
<button onclick="showStep('month2')">Show Step</button>
<div id="result2"></div>
</div>
<div class="demo-box">
<h3>Step = 6</h3>
<input type="month" id="month3" value="2024-01" step="6">
<button onclick="showStep('month3')">Show Step</button>
<div id="result3"></div>
</div>
</div>
<script>
function showStep(inputId) {
var input = document.getElementById(inputId);
var resultDiv = document.getElementById('result' + inputId.slice(-1));
resultDiv.innerHTML = "Step: " + (input.step || "1") + " months";
}
</script>
</body>
</html>
This example shows three month inputs with different step values, demonstrating how the step property affects month selection intervals.
How It Works
The step property works by defining intervals for valid month values. When a user interacts with the month picker using arrow keys or spinner controls:
step="1" (default) − Allows selection of any month
step="2" − Allows every 2nd month (January, March, May, etc.)
step="3" − Allows every 3rd month (January, April, July, October)
step="6" − Allows every 6th month (January, July of each year)
The step value must be a positive number. If set to an invalid value, the browser will ignore it and use the default behavior.
Browser Compatibility
The input month type and step property are supported in modern browsers including Chrome, Firefox, Safari, and Edge. However, the visual behavior of step controls may vary between browsers, and some older browsers may not support the month input type at all.
Conclusion
The HTML DOM Input Month step property provides control over month selection intervals in month input fields. By setting appropriate step values, you can restrict users to select months at specific intervals, which is useful for applications like quarterly reports, bi-annual reviews, or custom scheduling systems.
163 Views
