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 max Property
The HTML DOM Input Week max property sets or returns the maximum week value allowed for an HTML week input field. This property corresponds to the max attribute of an <input type="week"> element and helps validate user input by restricting the selectable week range.
Syntax
Following is the syntax for getting the max property −
inputWeekObject.max
Following is the syntax for setting the max property −
inputWeekObject.max = "YYYY-Www"
Parameters
The max property accepts a string value in the format YYYY-Www where −
| Component | Description |
|---|---|
| YYYY | A four-digit year (e.g., 2024) |
| W | A literal separator character between year and week |
| ww | A two-digit week number from 01 to 53 (e.g., 01, 26, 52) |
Return Value
The property returns a string representing the maximum allowed week in YYYY-Www format, or an empty string if no maximum is set.
Example − Getting the Max Property
Following example demonstrates how to retrieve the maximum week value −
<!DOCTYPE html>
<html>
<head>
<title>Input Week Max Property - Get Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Week Input with Max Value</h2>
<label for="weekInput">Select a week:</label>
<input type="week" id="weekInput" max="2024-W26" value="2024-W10">
<button onclick="getMaxValue()">Get Max Value</button>
<p id="result"></p>
<script>
function getMaxValue() {
var weekInput = document.getElementById("weekInput");
var maxValue = weekInput.max;
document.getElementById("result").innerHTML = "Maximum allowed week: " + maxValue;
}
</script>
</body>
</html>
The output shows the maximum week value when the button is clicked −
Maximum allowed week: 2024-W26
Example − Setting the Max Property
Following example shows how to dynamically change the maximum week value −
<!DOCTYPE html>
<html>
<head>
<title>Input Week Max Property - Set Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Insurance Renewal System</h2>
<label for="expiryWeek">Insurance expires in week:</label>
<input type="week" id="expiryWeek" value="2024-W10" max="2024-W10">
<br><br>
<button onclick="renewInsurance()">Renew Insurance</button>
<p id="status"></p>
<script>
var weekInput = document.getElementById("expiryWeek");
var status = document.getElementById("status");
// Display initial status
status.innerHTML = "Insurance expires at: Week " + weekInput.max.split("-W")[1] + ", " + weekInput.max.split("-W")[0];
function renewInsurance() {
weekInput.max = "2025-W52";
weekInput.value = "2025-W52";
status.innerHTML = "Insurance renewed till: Week " + weekInput.max.split("-W")[1] + ", " + weekInput.max.split("-W")[0];
status.style.color = "green";
}
</script>
</body>
</html>
Initially, the insurance expires at week 10 of 2024. After clicking "Renew Insurance", the maximum is extended to week 52 of 2025 −
Before renewal: Insurance expires at: Week 10, 2024 After renewal: Insurance renewed till: Week 52, 2025 (green text)
Example − Validation with Min and Max
Following example demonstrates using both min and max properties for week validation −
<!DOCTYPE html>
<html>
<head>
<title>Week Range Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Project Timeline</h2>
<label for="projectWeek">Select project week:</label>
<input type="week" id="projectWeek" min="2024-W01" max="2024-W52" value="2024-W26">
<br><br>
<button onclick="checkRange()">Check Valid Range</button>
<button onclick="updateRange()">Extend to 2025</button>
<p id="rangeInfo"></p>
<script>
function checkRange() {
var input = document.getElementById("projectWeek");
var info = document.getElementById("rangeInfo");
info.innerHTML = "Valid range: " + input.min + " to " + input.max;
}
function updateRange() {
var input = document.getElementById("projectWeek");
input.max = "2025-W26";
var info = document.getElementById("rangeInfo");
info.innerHTML = "Range extended to: " + input.min + " to " + input.max;
info.style.color = "blue";
}
</script>
</body>
</html>
The example shows how to work with week ranges and dynamically update the maximum allowed week.
Browser Compatibility
The Input Week max property is supported in modern browsers that support the HTML5 week input type. This includes Chrome, Firefox, Safari, and Edge. Internet Explorer does not support the week input type.
Conclusion
The HTML DOM Input Week max property provides an effective way to set upper limits on week selection in forms. It works seamlessly with form validation and can be dynamically modified using JavaScript to create flexible date range controls for various applications like project timelines, booking systems, and scheduling interfaces.
176 Views
