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
How to use week input type in HTML?
The week input type in HTML allows users to select a specific week and year using the <input type="week"> element. This input type displays a date picker interface where users can choose a week from a calendar, making it useful for applications that need week-based scheduling, reporting, or data entry.
When a user interacts with a week input field, most browsers display a date picker popup that shows weeks in a calendar format, allowing easy selection of the desired week and year.
Syntax
Following is the syntax for the week input type −
<input type="week" name="fieldname" id="fieldid">
Browser Compatibility
The week input type has limited browser support. Here is the current compatibility status −
| Browser | Support Status |
|---|---|
| Google Chrome | Supported |
| Microsoft Edge | Supported |
| Safari | Supported |
| Firefox | Not Supported |
| Internet Explorer | Not Supported |
Note − In unsupported browsers, the week input type falls back to a regular text input field.
Basic Week Input Example
Following example demonstrates a simple week input field −
<!DOCTYPE html>
<html>
<head>
<title>HTML Week Input Type</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Week Selection Form</h2>
<form action="/submit" method="get">
<label for="student-name">Student Name:</label><br>
<input type="text" id="student-name" name="sname" style="margin: 5px 0; padding: 5px;"><br><br>
<label for="training-week">Training Week:</label><br>
<input type="week" id="training-week" name="week" style="margin: 5px 0; padding: 5px;"><br><br>
<input type="submit" value="Submit" style="padding: 8px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px;">
</form>
</body>
</html>
The output displays a form with a text input for the student name and a week picker for selecting the training week −
Week Selection Form Student Name: [Text input field] Training Week: [Week picker showing current week] [Submit]
Week Input with Default Value
You can set a default week value using the value attribute. The format for week values is YYYY-W## where YYYY is the year and ## is the week number −
<!DOCTYPE html>
<html>
<head>
<title>Week Input with Default Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Project Planning</h2>
<form>
<label for="project-start">Project Start Week:</label><br>
<input type="week" id="project-start" name="start_week" value="2024-W15" style="margin: 5px 0; padding: 5px;"><br><br>
<label for="project-end">Project End Week:</label><br>
<input type="week" id="project-end" name="end_week" value="2024-W25" style="margin: 5px 0; padding: 5px;"><br><br>
<button type="submit" style="padding: 8px 15px; background-color: #008CBA; color: white; border: none; border-radius: 4px;">Plan Project</button>
</form>
</body>
</html>
The week inputs display with pre-selected values of week 15 and week 25 of 2024 respectively.
Week Input with Min and Max Constraints
You can restrict the selectable week range using the min and max attributes −
<!DOCTYPE html>
<html>
<head>
<title>Week Input with Constraints</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Registration</h2>
<form>
<label for="course-week">Select Course Week (2024 only):</label><br>
<input type="week" id="course-week" name="course_week"
min="2024-W01" max="2024-W52"
style="margin: 5px 0; padding: 5px;"><br><br>
<input type="submit" value="Register"
style="padding: 8px 15px; background-color: #ff9800; color: white; border: none; border-radius: 4px;">
</form>
<p style="color: #666; font-size: 14px;">Note: You can only select weeks from 2024.</p>
</body>
</html>
This restricts week selection to only weeks within the year 2024, from week 1 to week 52.
JavaScript Integration with Week Input
Following example shows how to access and manipulate week input values using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Week Input with JavaScript</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Week Selection with JavaScript</h2>
<label for="selected-week">Choose a week:</label><br>
<input type="week" id="selected-week" name="week"
onchange="displayWeek()" style="margin: 5px 0; padding: 5px;"><br><br>
<p id="output" style="color: #333; font-weight: bold;">Selected week will appear here</p>
<button onclick="setCurrentWeek()" style="padding: 8px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px;">Set Current Week</button>
<script>
function displayWeek() {
var weekInput = document.getElementById("selected-week");
var selectedWeek = weekInput.value;
var output = document.getElementById("output");
if (selectedWeek) {
output.textContent = "You selected: " + selectedWeek;
} else {
output.textContent = "No week selected";
}
}
function setCurrentWeek() {
var now = new Date();
var year = now.getFullYear();
var weekNum = getWeekNumber(now);
var weekString = year + "-W" + String(weekNum).padStart(2, '0');
document.getElementById("selected-week").value = weekString;
displayWeek();
}
function getWeekNumber(date) {
var firstDayOfYear = new Date(date.getFullYear(), 0, 1);
var pastDaysOfYear = (date - firstDayOfYear) / 86400000;
return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
}
</script>
</body>
</html>
This example demonstrates how to read the selected week value and programmatically set the current week using JavaScript. The selected week value is displayed in the format "YYYY-W##".
Common Use Cases
The week input type is particularly useful for −
Scheduling Applications − For booking appointments or events on a weekly basis
Project Management − Setting project milestones and deadlines by week
Reporting Systems − Generating weekly reports for specific time periods
Academic Systems − Managing course schedules and academic calendars
Payroll Systems − Selecting pay periods and work weeks
Fallback for Unsupported Browsers
For browsers that don't support the week input type, consider providing alternative input methods or JavaScript-based week pickers to ensure consistent user experience across all platforms.
Conclusion
The HTML week input type provides an intuitive way for users to select specific weeks and years through a calendar interface. While browser support is improving, it's important to test across different browsers and provide fallbacks where necessary. The week input type is valuable for applications requiring week-based date selection and integrates well with JavaScript for dynamic functionality.
524 Views
