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 value Property
The HTML DOM Input Month value property returns and modifies the value of a month input field. This property represents the selected month and year in YYYY-MM format, where YYYY is the four-digit year and MM is the two-digit month (01-12).
Syntax
Following is the syntax for returning the value −
object.value
Following is the syntax for setting the value −
object.value = "YYYY-MM"
Return Value
The property returns a string representing the month and year in YYYY-MM format. If no month is selected, it returns an empty string ("").
Example − Getting Month Value
Following example demonstrates how to retrieve the value from a month input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Month Value</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Select Your Holiday Month</h2>
<input type="month" id="holidayMonth" value="2024-06">
<br><br>
<button onclick="showValue()">Show Selected Month</button>
<p id="result" style="font-size: 18px; color: #333;"></p>
<script>
function showValue() {
var monthInput = document.getElementById("holidayMonth");
var selectedMonth = monthInput.value;
document.getElementById("result").innerHTML = "Selected Month: " + selectedMonth;
}
</script>
</body>
</html>
The output shows the selected month in YYYY-MM format −
Select Your Holiday Month [June 2024 input field] [Show Selected Month] Selected Month: 2024-06
Example − Setting Month Value
Following example demonstrates how to set the month value programmatically −
<!DOCTYPE html>
<html>
<head>
<title>Set Month Value</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Set Default Month</h2>
<input type="month" id="eventMonth">
<br><br>
<button onclick="setCurrentMonth()">Set Current Month</button>
<button onclick="setChristmas()">Set December 2024</button>
<button onclick="clearMonth()">Clear Selection</button>
<script>
function setCurrentMonth() {
var monthInput = document.getElementById("eventMonth");
var today = new Date();
var currentMonth = today.getFullYear() + "-" + String(today.getMonth() + 1).padStart(2, '0');
monthInput.value = currentMonth;
}
function setChristmas() {
document.getElementById("eventMonth").value = "2024-12";
}
function clearMonth() {
document.getElementById("eventMonth").value = "";
}
</script>
</body>
</html>
The buttons allow setting different month values or clearing the selection.
Example − Form Validation
Following example shows how to validate month input using the value property −
<!DOCTYPE html>
<html>
<head>
<title>Month Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Registration</h2>
<form>
<label for="eventMonth">Select Event Month:</label><br>
<input type="month" id="eventMonth" min="2024-01" max="2025-12"><br><br>
<button type="button" onclick="validateMonth()">Validate Selection</button>
</form>
<p id="message" style="font-weight: bold;"></p>
<script>
function validateMonth() {
var monthInput = document.getElementById("eventMonth");
var selectedMonth = monthInput.value;
var messageElement = document.getElementById("message");
if (selectedMonth === "") {
messageElement.innerHTML = "<span style='color: red;'>Please select a month!</span>";
} else {
var year = parseInt(selectedMonth.split("-")[0]);
var month = parseInt(selectedMonth.split("-")[1]);
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
messageElement.innerHTML = "<span style='color: green;'>Valid selection: " +
monthNames[month-1] + " " + year + "</span>";
}
}
</script>
</body>
</html>
This example validates the month selection and displays appropriate feedback messages.
Event Registration Select Event Month: [Month picker] [Validate Selection] Valid selection: June 2024 (or error message if empty)
Browser Support
The month input type and its value property are supported in modern browsers. For better user experience, always provide fallback handling for browsers that do not support the month input type.
Key Points
-
The value is always in
YYYY-MMformat regardless of the user's locale. -
An empty string is returned when no month is selected.
-
You can set minimum and maximum allowed months using the
minandmaxattributes. -
The property is useful for form validation and dynamic month selection.
Conclusion
The HTML DOM Input Month value property provides an easy way to get and set month values in YYYY-MM format. It is essential for handling month-related user inputs in web forms and creating dynamic date-based applications.
181 Views
