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 Object
The HTML DOM Input Month Object represents an <input> element with type="month". This input type allows users to select a month and year combination, displaying a month picker interface in supported browsers.
The Input Month Object provides properties and methods to programmatically create, access, and manipulate month input fields through JavaScript.
Syntax
Following is the syntax to create an input month object using JavaScript −
var monthInput = document.createElement("INPUT");
monthInput.setAttribute("type", "month");
You can also access an existing month input element −
var monthInput = document.getElementById("monthId");
Properties
Following are the properties of HTML DOM Input Month Object −
| Property | Description |
|---|---|
| autocomplete | Sets or returns the value of the autocomplete attribute of the month input field. |
| autofocus | Sets or returns whether the input month field should automatically get focus when the page loads. |
| disabled | Sets or returns whether the input month field is disabled. |
| defaultValue | Sets or returns the default value of the input month field. |
| form | Returns a reference to the form that contains the input month field. |
| list | Returns a reference to the datalist that contains the input month field. |
| max | Sets or returns the value of the max attribute of the input month field. |
| min | Sets or returns the value of the min attribute of the input month field. |
| name | Sets or returns the value of the name attribute of the input month field. |
| readOnly | Sets or returns whether the input month field is read-only. |
| required | Sets or returns whether the month field must be filled out before submitting the form. |
| step | Sets or returns the value of the step attribute of the input month field. |
| type | Returns the type of form element the month input field is. |
| value | Sets or returns the value of the value attribute of the month input field. |
Methods
Following are the methods of HTML DOM Input Month Object −
| Method | Description |
|---|---|
| stepUp() | Increments the value of the input month field by a specified number. |
| stepDown() | Decrements the value of the input month field by a specified number. |
Example − Creating Input Month Object
Following example demonstrates how to create an HTML DOM input month object −
<!DOCTYPE html>
<html>
<head>
<title>DOM Input Month Object Example</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h1 style="color: #23CE6B;">DOM Input Month Object Example</h1>
<button onclick="createMonthField()" style="padding: 10px 20px; margin: 10px; cursor: pointer;">Create Month Input Field</button>
<div id="output"></div>
<script>
function createMonthField() {
var monthInput = document.createElement("INPUT");
monthInput.setAttribute("type", "month");
monthInput.setAttribute("value", "2024-03");
monthInput.style.margin = "20px";
monthInput.style.padding = "8px";
document.getElementById("output").appendChild(monthInput);
}
</script>
</body>
</html>
The output displays a button that creates a month input field when clicked −
DOM Input Month Object Example [Create Month Input Field] (Clicking creates a month picker with value "2024-03")
Example − Working with Month Input Properties
Following example shows how to access and modify properties of a month input field −
<!DOCTYPE html>
<html>
<head>
<title>Month Input Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Month Input Properties Example</h2>
<form>
<label for="monthField">Select Month:</label>
<input type="month" id="monthField" name="selectedMonth"
value="2024-01" min="2020-01" max="2030-12" required>
</form>
<br>
<button onclick="showProperties()" style="padding: 8px 16px; margin: 5px;">Show Properties</button>
<button onclick="modifyProperties()" style="padding: 8px 16px; margin: 5px;">Modify Properties</button>
<div id="result" style="margin-top: 20px; padding: 10px; border: 1px solid #ddd;"></div>
<script>
function showProperties() {
var monthInput = document.getElementById("monthField");
var result = document.getElementById("result");
result.innerHTML = "<h3>Current Properties:</h3>" +
"<p>Value: " + monthInput.value + "</p>" +
"<p>Min: " + monthInput.min + "</p>" +
"<p>Max: " + monthInput.max + "</p>" +
"<p>Required: " + monthInput.required + "</p>" +
"<p>Name: " + monthInput.name + "</p>";
}
function modifyProperties() {
var monthInput = document.getElementById("monthField");
monthInput.value = "2024-12";
monthInput.min = "2023-01";
monthInput.max = "2025-12";
document.getElementById("result").innerHTML = "<p style='color: green;'>Properties modified! Value set to 2024-12, min to 2023-01, max to 2025-12.</p>";
}
</script>
</body>
</html>
The output shows a month input with buttons to display and modify its properties −
Month Input Properties Example Select Month: [March 2024 ?] [Show Properties] [Modify Properties] Current Properties: Value: 2024-01 Min: 2020-01 Max: 2030-12 Required: true Name: selectedMonth
Example − Using stepUp() and stepDown() Methods
Following example demonstrates the stepUp() and stepDown() methods −
<!DOCTYPE html>
<html>
<head>
<title>Month Input Step Methods</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Month Input Step Methods</h2>
<label for="monthStep">Current Month:</label>
<input type="month" id="monthStep" value="2024-06" style="margin: 10px; padding: 5px;">
<br><br>
<button onclick="stepUpMonth()" style="padding: 8px 16px; margin: 5px; background: #4CAF50; color: white; border: none;">Step Up (+1)</button>
<button onclick="stepDownMonth()" style="padding: 8px 16px; margin: 5px; background: #f44336; color: white; border: none;">Step Down (-1)</button>
<button onclick="stepUpThree()" style="padding: 8px 16px; margin: 5px; background: #2196F3; color: white; border: none;">Step Up (+3)</button>
<div id="stepResult" style="margin-top: 15px; font-weight: bold;"></div>
<script>
function stepUpMonth() {
var monthInput = document.getElementById("monthStep");
monthInput.stepUp(1);
document.getElementById("stepResult").innerHTML = "Month incremented by 1: " + monthInput.value;
}
function stepDownMonth() {
var monthInput = document.getElementById("monthStep");
monthInput.stepDown(1);
document.getElementById("stepResult").innerHTML = "Month decremented by 1: " + monthInput.value;
}
function stepUpThree() {
var monthInput = document.getElementById("monthStep");
monthInput.stepUp(3);
document.getElementById("stepResult").innerHTML = "Month incremented by 3: " + monthInput.value;
}
</script>
</body>
</html>
The output shows a month input with buttons that increment or decrement the month value −
Month Input Step Methods Current Month: [June 2024 ?] [Step Up (+1)] [Step Down (-1)] [Step Up (+3)] Month incremented by 1: 2024-07
Browser Compatibility
The HTML5 month input type is supported in modern browsers including Chrome, Firefox, Safari, and Edge. In browsers that don't support the month input type, it falls back to a regular text input field.
Conclusion
The HTML DOM Input Month Object provides a convenient way to handle month and year selection in web forms. It offers properties for validation (min, max, required) and methods for programmatic value manipulation (stepUp, stepDown), making it ideal for date-related form inputs where only month precision is needed.
207 Views
