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 min Property
The HTML DOM Input Month min Property is used to set or return the value of the min attribute of an input field with type="month". This property defines the earliest month that users can select in the month input field.
Syntax
Following is the syntax for returning the min value −
object.min
Following is the syntax for setting the min value −
object.min = "YYYY-MM"
Here, YYYY represents the year (4 digits) and MM represents the month (01-12). For example, "2024-03" represents March 2024.
Return Value
The property returns a string representing the minimum month value in "YYYY-MM" format, or an empty string if no minimum is set.
Example − Getting and Setting Min Value
Following example demonstrates how to get and set the min property of a month input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Month Min Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Month Input Min Property</h2>
<p>Select a month (minimum: April 2024):</p>
<input type="month" id="monthInput" min="2024-04">
<br><br>
<button onclick="getMin()">Get Min Value</button>
<button onclick="setMin()">Set New Min (Jan 2025)</button>
<button onclick="removeMin()">Remove Min</button>
<p id="result"></p>
<script>
function getMin() {
var monthInput = document.getElementById("monthInput");
var minValue = monthInput.min;
document.getElementById("result").innerHTML =
"Current min value: " + (minValue || "Not set");
}
function setMin() {
var monthInput = document.getElementById("monthInput");
monthInput.min = "2025-01";
document.getElementById("result").innerHTML =
"Min value set to: January 2025";
}
function removeMin() {
var monthInput = document.getElementById("monthInput");
monthInput.min = "";
document.getElementById("result").innerHTML =
"Min value removed";
}
</script>
</body>
</html>
The example shows three buttons: one to get the current min value, one to set a new minimum, and one to remove the minimum constraint.
Example − Month Range Selection
Following example creates a month input field with both min and max constraints for selecting a vacation month −
<!DOCTYPE html>
<html>
<head>
<title>Month Range Selection</title>
<style>
.container {
max-width: 500px;
margin: 20px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
text-align: center;
font-family: Arial, sans-serif;
}
.month-input {
padding: 10px;
border: 2px solid #007bff;
border-radius: 4px;
font-size: 16px;
margin: 10px;
}
.btn {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
.btn:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h2>Select Your Vacation Month</h2>
<p>Choose a month between April and August 2024:</p>
<input type="month" id="vacationMonth" class="month-input"
min="2024-04" max="2024-08">
<br>
<button onclick="validateSelection()" class="btn">Validate Selection</button>
<div id="output" class="result"></div>
</div>
<script>
function validateSelection() {
var monthInput = document.getElementById("vacationMonth");
var output = document.getElementById("output");
var selectedValue = monthInput.value;
if (!selectedValue) {
output.innerHTML = "Please select a month!";
output.style.color = "#dc3545";
return;
}
var minValue = monthInput.min;
var maxValue = monthInput.max;
if (selectedValue < minValue || selectedValue > maxValue) {
output.innerHTML = "Selected month is outside allowed range!";
output.style.color = "#dc3545";
} else {
var date = new Date(selectedValue + "-01");
var monthName = date.toLocaleString('default', { month: 'long', year: 'numeric' });
output.innerHTML = "Great! You selected: " + monthName;
output.style.color = "#28a745";
}
}
</script>
</body>
</html>
This example validates the selected month against the min and max constraints and displays a user-friendly message with the selected month name.
Example − Dynamic Min Value Update
Following example demonstrates how to dynamically update the min value based on user interaction −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Min Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Project Timeline Selection</h2>
<label for="startMonth">Project Start Month:</label>
<input type="month" id="startMonth" onchange="updateEndMonth()">
<br><br>
<label for="endMonth">Project End Month:</label>
<input type="month" id="endMonth">
<br><br>
<button onclick="showTimeline()">Show Project Timeline</button>
<div id="timeline" style="margin-top: 20px; padding: 10px; background-color: #e8f4f8;"></div>
<script>
function updateEndMonth() {
var startMonth = document.getElementById("startMonth");
var endMonth = document.getElementById("endMonth");
if (startMonth.value) {
endMonth.min = startMonth.value;
endMonth.disabled = false;
} else {
endMonth.min = "";
endMonth.disabled = true;
}
}
function showTimeline() {
var startMonth = document.getElementById("startMonth").value;
var endMonth = document.getElementById("endMonth").value;
var timeline = document.getElementById("timeline");
if (!startMonth || !endMonth) {
timeline.innerHTML = "Please select both start and end months.";
return;
}
var start = new Date(startMonth + "-01");
var end = new Date(endMonth + "-01");
timeline.innerHTML =
"Project Timeline: " +
start.toLocaleString('default', { month: 'long', year: 'numeric' }) +
" to " +
end.toLocaleString('default', { month: 'long', year: 'numeric' });
}
// Initialize end month as disabled
window.onload = function() {
document.getElementById("endMonth").disabled = true;
};
</script>
</body>
</html>
In this example, selecting a start month automatically sets the minimum value for the end month, ensuring the end month cannot be earlier than the start month.
Browser Compatibility
The Input Month min property is supported in modern browsers that support the <input type="month"> element. This includes Chrome, Firefox, Safari, and Edge. However, the visual appearance of the month picker may vary between browsers.
Key Points
-
The min property accepts date strings in "YYYY-MM" format only.
-
Setting an empty string removes the minimum constraint.
-
The min value is enforced during form validation and user interaction.
-
The property can be dynamically changed using JavaScript to create interactive date ranges.
-
When used with the
maxproperty, it creates a valid date range for user selection.
Conclusion
The HTML DOM Input Month min property provides an effective way to set minimum date constraints on month input fields. It enhances form validation and improves user experience by preventing selection of invalid dates. Combined with JavaScript, it enables dynamic date range controls for various applications like project timelines, booking systems, and date-based filters.
168 Views
