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
How to use month input type in HTML?
The month input type in HTML provides users with a month and year selection control. Using <input type="month">, you can create a form field that allows users to pick a specific month and year from a calendar-like interface.
The month input control displays the selected value in YYYY-MM format, where YYYY represents the year and MM represents the month. This input type is particularly useful for forms requiring date ranges, event scheduling, or any scenario where only month and year precision is needed.
Syntax
Following is the basic syntax for the month input type −
<input type="month" name="fieldName" id="fieldId">
Basic Month Input Example
Let us see a simple example of the month input control −
<!DOCTYPE html>
<html>
<head>
<title>Month Input Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form name="form1">
<label for="admission">Date of Admission:</label>
<input type="month" name="doa" id="admission">
</form>
</body>
</html>
The output displays a month picker control. When clicked, it opens a calendar interface allowing month and year selection −
Date of Admission: [Month Picker Control - showing current month/year]
Using JavaScript with Month Input
You can capture and display the selected month value using JavaScript. Here's an example that shows the selected value when the input changes −
<!DOCTYPE html>
<html>
<head>
<title>Month Input with JavaScript</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form name="form1">
<label for="admission">Date of Admission:</label>
<input type="month" name="doa" id="admission" onchange="displayResult()">
<p id="output"></p>
</form>
<script>
function displayResult() {
var selectedMonth = document.getElementById("admission").value;
document.getElementById("output").innerHTML =
"<b>Selected Month: " + selectedMonth + "</b>";
}
</script>
</body>
</html>
When a month is selected, the JavaScript function displays the value in YYYY-MM format below the input field.
Setting Default Values
You can set a default month and year using the value attribute −
<!DOCTYPE html>
<html>
<head>
<title>Default Month Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<p>
Select a month:
<input type="month" name="selectedmonth" value="2023-06">
<br><br>
<input type="submit" value="Submit">
</p>
</form>
</body>
</html>
The output shows June 2023 as the pre-selected default value −
Select a month: [June 2023 pre-selected] [Submit]
Setting Date Ranges with Min and Max
You can restrict the selectable date range using min and max attributes −
<!DOCTYPE html>
<html>
<head>
<title>Month Input with Range</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<p>
Select event month (Jan 2023 - Dec 2023):
<input type="month" name="eventmonth"
value="2023-01"
min="2023-01"
max="2023-12">
<br><br>
<input type="submit" value="Register">
</p>
</form>
</body>
</html>
Only months between January 2023 and December 2023 will be selectable. Other months appear disabled in the calendar interface.
Using Step Attribute
The step attribute allows you to skip months in the selection. For example, step="3" allows selection every 3 months −
<!DOCTYPE html>
<html>
<head>
<title>Month Input with Step</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<h3>Quarterly Event Registration</h3>
<table style="border-spacing: 10px;">
<tr>
<td><label>Choose Event:</label></td>
<td>
<select name="event">
<option>Quarterly Review</option>
<option>Season Launch</option>
<option>Quarterly Meeting</option>
</select>
</td>
</tr>
<tr>
<td><label>Event Quarter:</label></td>
<td><input type="month" name="quarter" step="3" value="2023-01"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Register"></td>
</tr>
</table>
</form>
</body>
</html>
With step="3", the input allows selection of January, April, July, and October only (quarterly intervals).
Month Input Attributes
Following are the key attributes available for month input type −
| Attribute | Description | Example |
|---|---|---|
value |
Sets the default selected month | value="2023-06" |
min |
Sets the earliest selectable month | min="2023-01" |
max |
Sets the latest selectable month | max="2023-12" |
step |
Sets the month interval for selection |
step="3" (quarterly) |
required |
Makes the field mandatory | required |
disabled |
Disables the input | disabled |
Browser Compatibility
The month input type is supported by most modern browsers including Chrome, Firefox, Safari, and Edge. For browsers that don't support it, the input gracefully falls back to a regular text input field. Always provide proper labels and validation for better user experience across all browsers.
Conclusion
The HTML month input type provides an intuitive way for users to select month and year combinations. With attributes like min, max, step, and value, you can customize the control to fit various use cases, from event registration to date range selection. The input returns values in the standardized YYYY-MM format, making it easy to process in both client-side JavaScript and server-side applications.
6K+ Views
