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 Week min Property
The HTML DOM Input Week min property is used to set or return the value of the min attribute of an HTML week input field. This property defines the earliest week that a user can select in a week picker control.
Syntax
Following is the syntax for returning the min value −
inputWeekObject.min
Following is the syntax for setting the min value −
inputWeekObject.min = "YYYY-Www"
Parameters
The min property accepts a string value in the format "YYYY-Www" where −
| Parameter | Description |
|---|---|
| YYYY | A four-digit year (e.g., 2024) |
| W | Literal character "W" as separator between year and week |
| ww | Two-digit week number from 01 to 53 (e.g., 07, 25) |
Return Value
The property returns a string representing the minimum allowed week value in "YYYY-Www" format. If no minimum is set, it returns an empty string.
Example − Getting the Min Value
Following example demonstrates how to retrieve the minimum week value −
<!DOCTYPE html>
<html>
<head>
<title>Input Week min Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Week Input Min Property</h2>
<label for="weekInput">Select Week:</label>
<input type="week" id="weekInput" min="2024-W10" value="2024-W15">
<button onclick="getMin()">Get Min Value</button>
<p id="result"></p>
<script>
function getMin() {
var weekInput = document.getElementById("weekInput");
var minValue = weekInput.min;
document.getElementById("result").innerHTML = "Minimum allowed week: " + minValue;
}
</script>
</body>
</html>
The output displays the minimum week value when the button is clicked −
Minimum allowed week: 2024-W10
Example − Setting the Min Value
Following example shows how to dynamically set the minimum week value −
<!DOCTYPE html>
<html>
<head>
<title>Setting Week Min Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Min Week Setting</h2>
<label for="weekSelect">Project Week:</label>
<input type="week" id="weekSelect" value="2024-W20">
<br><br>
<button onclick="setEarlyMin()">Set Min to W05</button>
<button onclick="setLateMin()">Set Min to W15</button>
<button onclick="showMin()">Show Current Min</button>
<p id="display"></p>
<script>
var weekInput = document.getElementById("weekSelect");
var display = document.getElementById("display");
function setEarlyMin() {
weekInput.min = "2024-W05";
display.innerHTML = "Minimum set to: 2024-W05 (Week 5 of 2024)";
}
function setLateMin() {
weekInput.min = "2024-W15";
display.innerHTML = "Minimum set to: 2024-W15 (Week 15 of 2024)";
}
function showMin() {
var current = weekInput.min || "No minimum set";
display.innerHTML = "Current minimum: " + current;
}
</script>
</body>
</html>
The buttons allow setting different minimum values and displaying the current minimum −
Current minimum: 2024-W15 (or "No minimum set" if no min value exists)
Example − Vacation Week Selector
Following example creates a practical vacation week selector with minimum constraint −
<!DOCTYPE html>
<html>
<head>
<title>Vacation Week Selector</title>
<style>
.container { max-width: 500px; margin: 0 auto; padding: 20px; text-align: center; }
.week-input { padding: 8px; margin: 10px; font-size: 16px; }
.btn { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
.result { background-color: #f0f8ff; padding: 15px; margin: 10px 0; border-radius: 5px; }
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="container">
<h2>Vacation Week Planner</h2>
<label for="vacationWeek">Select Vacation Week:</label><br>
<input type="week" id="vacationWeek" class="week-input" value="2024-W30" min="2024-W20"><br>
<button class="btn" onclick="planVacation()">Plan My Vacation</button>
<div id="planResult" class="result"></div>
</div>
<script>
function planVacation() {
var weekInput = document.getElementById("vacationWeek");
var selectedWeek = weekInput.value;
var minWeek = weekInput.min;
var result = document.getElementById("planResult");
if (selectedWeek < minWeek) {
result.innerHTML = "<strong>Invalid Selection!</strong><br>Earliest vacation week allowed: " + minWeek;
result.style.backgroundColor = "#ffe6e6";
} else {
var year = selectedWeek.split("-W")[0];
var week = selectedWeek.split("-W")[1];
result.innerHTML = "<strong>Vacation Planned!</strong><br>Week " + week + " of " + year + "<br>Minimum allowed: " + minWeek;
result.style.backgroundColor = "#e6ffe6";
}
}
</script>
</body>
</html>
This example validates the selected week against the minimum constraint and provides user-friendly feedback.
Browser Compatibility
The min property for week input is supported in modern browsers that support the HTML5 week input type. However, browser support may vary:
- Chrome − Full support
- Firefox − Limited support for week input
- Safari − Partial support
- Edge − Full support
Conclusion
The HTML DOM Input Week min property provides an effective way to restrict user selection to weeks on or after a specified minimum week. It accepts string values in "YYYY-Www" format and returns the current minimum constraint, making it useful for date range validation in web forms.
175 Views
