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 value Property
The HTML DOM Input Week value property gets or sets the value of an HTML input element with type="week". This property returns a string in the format YYYY-WNN where YYYY is the year and NN is the week number (01-53). It allows JavaScript to programmatically read and modify week input values.
Syntax
Following is the syntax for getting the value −
inputWeekObject.value
Following is the syntax for setting the value −
inputWeekObject.value = "YYYY-WNN"
Parameters
YYYY − A four-digit year (e.g., 2024)
WNN − Week number from W01 to W53, where W01 is the first week of the year
Return Value
The property returns a string representing the week value in YYYY-WNN format, or an empty string if no value is set.
Example − Getting and Setting Week Value
Following example demonstrates how to get and set the value of a week input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Week value Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Week Selection Example</h2>
<label for="weekInput">Select Week: </label>
<input type="week" id="weekInput" value="2024-W15">
<br><br>
<button onclick="getValue()">Get Value</button>
<button onclick="setValue()">Set to Week 20</button>
<button onclick="clearValue()">Clear Value</button>
<p id="output"></p>
<script>
function getValue() {
var weekInput = document.getElementById("weekInput");
var value = weekInput.value;
document.getElementById("output").innerHTML = "Current value: " + value;
}
function setValue() {
var weekInput = document.getElementById("weekInput");
weekInput.value = "2024-W20";
document.getElementById("output").innerHTML = "Value set to: 2024-W20";
}
function clearValue() {
var weekInput = document.getElementById("weekInput");
weekInput.value = "";
document.getElementById("output").innerHTML = "Value cleared";
}
</script>
</body>
</html>
The example shows three operations: getting the current week value, setting it to a specific week, and clearing the input.
Example − Examination Week Scheduler
Following example shows a practical application for scheduling examination weeks −
<!DOCTYPE html>
<html>
<head>
<title>Examination Week Scheduler</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<fieldset style="max-width: 500px; margin: 0 auto; padding: 20px;">
<legend>Examination Week Scheduler</legend>
<label for="examWeek">Current Examination Week: </label>
<input type="week" id="examWeek" value="2024-W15">
<br><br>
<button onclick="postponeExam()" style="padding: 8px 16px; margin-right: 10px;">Postpone by 1 Week</button>
<button onclick="advanceExam()" style="padding: 8px 16px;">Advance by 1 Week</button>
<div id="result" style="margin-top: 15px; padding: 10px; background-color: #f0f8ff; border-radius: 5px;"></div>
</fieldset>
<script>
var examInput = document.getElementById("examWeek");
var resultDiv = document.getElementById("result");
function postponeExam() {
var currentValue = examInput.value;
if (currentValue) {
var parts = currentValue.split('-W');
var year = parseInt(parts[0]);
var week = parseInt(parts[1]);
week++;
if (week > 53) {
week = 1;
year++;
}
var newValue = year + '-W' + (week < 10 ? '0' + week : week);
examInput.value = newValue;
displayResult("Examination postponed to Week " + week + " of " + year);
}
}
function advanceExam() {
var currentValue = examInput.value;
if (currentValue) {
var parts = currentValue.split('-W');
var year = parseInt(parts[0]);
var week = parseInt(parts[1]);
week--;
if (week < 1) {
week = 53;
year--;
}
var newValue = year + '-W' + (week < 10 ? '0' + week : week);
examInput.value = newValue;
displayResult("Examination advanced to Week " + week + " of " + year);
}
}
function displayResult(message) {
resultDiv.innerHTML = "<strong>" + message + "</strong><br>New value: " + examInput.value;
}
</script>
</body>
</html>
This example demonstrates how to manipulate week values by incrementing or decrementing the week number, handling year boundaries appropriately.
Example − Week Range Validation
Following example shows how to validate week input values −
<!DOCTYPE html>
<html>
<head>
<title>Week Validation Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Project Timeline (2024 only)</h3>
<label for="projectWeek">Select Project Week: </label>
<input type="week" id="projectWeek" min="2024-W01" max="2024-W52">
<br><br>
<button onclick="validateWeek()">Validate Selection</button>
<button onclick="setCurrentWeek()">Set Current Week</button>
<div id="validation" style="margin-top: 15px;"></div>
<script>
function validateWeek() {
var weekInput = document.getElementById("projectWeek");
var value = weekInput.value;
var validationDiv = document.getElementById("validation");
if (!value) {
validationDiv.innerHTML = "<span style='color: red;'>Please select a week</span>";
return;
}
var parts = value.split('-W');
var year = parseInt(parts[0]);
var week = parseInt(parts[1]);
if (year === 2024 && week >= 1 && week <= 52) {
validationDiv.innerHTML = "<span style='color: green;'>? Valid selection: Week " + week + " of " + year + "</span>";
} else {
validationDiv.innerHTML = "<span style='color: red;'>? Please select a week from 2024</span>";
}
}
function setCurrentWeek() {
var now = new Date();
var startOfYear = new Date(now.getFullYear(), 0, 1);
var days = Math.floor((now - startOfYear) / (24 * 60 * 60 * 1000));
var weekNumber = Math.ceil((days + startOfYear.getDay() + 1) / 7);
var currentWeek = now.getFullYear() + '-W' + (weekNumber < 10 ? '0' + weekNumber : weekNumber);
document.getElementById("projectWeek").value = currentWeek;
document.getElementById("validation").innerHTML = "Set to current week: " + currentWeek;
}
</script>
</body>
</html>
This example demonstrates week validation and shows how to calculate and set the current week programmatically.
Browser Compatibility
The week input type and its value property are supported in modern browsers including Chrome, Firefox, Safari, and Edge. However, some older browsers may display a text input instead of a week picker control.
Conclusion
The HTML DOM Input Week value property provides a convenient way to get and set week values in YYYY-WNN format. It's particularly useful for scheduling applications, date range selections, and any scenario requiring week-based input. Always validate the format when setting values programmatically.
188 Views
