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 max Property
The HTML DOM Input Month max property returns and modifies the value of the max attribute of an input field with type="month". This property sets the latest month that users can select in a month picker control.
Syntax
Following is the syntax for returning the max value −
object.max
Following is the syntax for setting the max value −
object.max = "YYYY-MM"
Here, YYYY represents the year and MM represents the month (e.g., "2019-02" for February 2019).
Return Value
The max property returns a string representing the maximum month value in YYYY-MM format, or an empty string if no max value is set.
Example − Getting Max Property Value
Following example demonstrates how to retrieve the max property value from a month input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Month Max Property - Get Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Getting Max Property Value</h2>
<label>Select Month: </label>
<input type="month" id="monthInput" min="2023-01" max="2023-12">
<br><br>
<button onclick="getMaxValue()">Get Max Value</button>
<p id="result"></p>
<script>
function getMaxValue() {
var monthInput = document.getElementById("monthInput");
var maxValue = monthInput.max;
document.getElementById("result").innerHTML = "Max value: " + maxValue;
}
</script>
</body>
</html>
The output displays the maximum allowed month value when the button is clicked −
Max value: 2023-12
Example − Setting Max Property Value
Following example shows how to dynamically set the max property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Input Month Max Property - Set Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Setting Max Property Value</h2>
<label>Leave Application Month: </label>
<input type="month" id="leaveMonth">
<br><br>
<button onclick="setCurrentYear()">Set Max to Current Year</button>
<button onclick="setNextYear()">Set Max to Next Year</button>
<p id="display"></p>
<script>
function setCurrentYear() {
var monthInput = document.getElementById("leaveMonth");
var currentYear = new Date().getFullYear();
monthInput.max = currentYear + "-12";
document.getElementById("display").innerHTML = "Max set to: " + monthInput.max;
}
function setNextYear() {
var monthInput = document.getElementById("leaveMonth");
var nextYear = new Date().getFullYear() + 1;
monthInput.max = nextYear + "-06";
document.getElementById("display").innerHTML = "Max set to: " + monthInput.max;
}
</script>
</body>
</html>
The buttons dynamically update the maximum selectable month based on the current date.
Example − Complete Month Selection with Validation
Following example demonstrates a complete month selection form with min and max validation −
<!DOCTYPE html>
<html>
<head>
<title>Month Selection with Max Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; background-color: #f0f8ff; }
.container { max-width: 500px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; }
h2 { color: #2c3e50; text-align: center; }
label { font-weight: bold; color: #34495e; }
input[type="month"] {
width: 100%; padding: 10px; margin: 10px 0;
border: 2px solid #3498db; border-radius: 4px; font-size: 16px;
}
button {
background: #3498db; color: white; padding: 10px 20px;
border: none; border-radius: 4px; cursor: pointer; margin: 5px;
}
button:hover { background: #2980b9; }
.result {
margin-top: 20px; padding: 15px; background: #ecf0f1;
border-radius: 4px; font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2>Leave Application Form</h2>
<p>Select your desired leave month between April and August:</p>
<label for="monthInput">Leave Month:</label>
<input type="month" id="monthInput" min="2024-04" max="2024-08">
<br>
<button onclick="showSelection()">Submit Application</button>
<button onclick="showMaxValue()">Show Max Allowed</button>
<div id="result" class="result"></div>
</div>
<script>
function showSelection() {
var monthInput = document.getElementById("monthInput");
var result = document.getElementById("result");
if (monthInput.value === '') {
result.innerHTML = "? Please select a month!";
result.style.color = "#e74c3c";
} else {
var selectedDate = new Date(monthInput.value + "-01");
var monthName = selectedDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
result.innerHTML = "? Leave application submitted for: " + monthName;
result.style.color = "#27ae60";
}
}
function showMaxValue() {
var monthInput = document.getElementById("monthInput");
var result = document.getElementById("result");
result.innerHTML = "? Maximum selectable month: " + monthInput.max;
result.style.color = "#3498db";
}
</script>
</body>
</html>
This example creates a user-friendly leave application form where users can only select months between April and August 2024. The form validates the selection and provides appropriate feedback.
Browser Compatibility
The max property for month inputs is supported in modern browsers including Chrome, Firefox, Safari, and Edge. However, some older browsers may not support the month input type and will fallback to a text input.
Key Points
The max property accepts values in
YYYY-MMformat only.Setting an invalid format will be ignored by the browser.
The max value should be greater than or equal to the min value if both are set.
Users cannot select months beyond the max value in supported browsers.
The property returns an empty string if no max attribute is set.
Conclusion
The HTML DOM Input Month max property provides an effective way to restrict month selection to a specific range. It enhances form validation by preventing users from selecting months beyond the allowed maximum date, making it particularly useful for scheduling applications, date-range forms, and booking systems.
200 Views
