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 type Property
The HTML DOM Input Week type property is used to get or set the type attribute of an input element that is initially of type "week". This property allows you to dynamically change the input type or retrieve its current type value using JavaScript.
Syntax
Following is the syntax for getting the type property −
inputWeekObject.type
Following is the syntax for setting the type property −
inputWeekObject.type = stringValue
Return Value
The property returns a string representing the current type of the input element. For a week input, it returns "week" by default.
Parameters
The stringValue parameter accepts any valid HTML input type. Common values include −
| String Value | Description |
|---|---|
| week | Defines that input type is week (allows week and year selection) |
| datetime-local | Defines that input type is datetime-local (date and time without timezone) |
| text | Defines that input type is text (plain text input) |
| date | Defines that input type is date (date picker) |
| time | Defines that input type is time (time picker) |
Example − Getting Input Type
Following example demonstrates how to get the type property of a week input −
<!DOCTYPE html>
<html>
<head>
<title>Input Week Type Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Week Input Type Example</h2>
<form>
<label for="WeekSelect">Select Week: </label>
<input type="week" id="WeekSelect" value="2024-W10">
<br><br>
<button type="button" onclick="getTypeOfInput()">Get Input Type</button>
<p id="result"></p>
</form>
<script>
function getTypeOfInput() {
var inputWeek = document.getElementById("WeekSelect");
var result = document.getElementById("result");
result.textContent = "Current input type: " + inputWeek.type;
}
</script>
</body>
</html>
The output displays the current type of the input element −
Current input type: week
Example − Changing Input Type
Following example shows how to change the input type from week to other types −
<!DOCTYPE html>
<html>
<head>
<title>Change Input Week Type</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Input Type Change</h2>
<form>
<label for="dynamicInput">Input Field: </label>
<input type="week" id="dynamicInput" value="2024-W15">
<br><br>
<button type="button" onclick="changeToText()">Change to Text</button>
<button type="button" onclick="changeToDate()">Change to Date</button>
<button type="button" onclick="changeToWeek()">Change to Week</button>
<br><br>
<p>Current Type: <span id="currentType">week</span></p>
</form>
<script>
var input = document.getElementById("dynamicInput");
var typeDisplay = document.getElementById("currentType");
function changeToText() {
input.type = "text";
typeDisplay.textContent = input.type;
}
function changeToDate() {
input.type = "date";
typeDisplay.textContent = input.type;
}
function changeToWeek() {
input.type = "week";
typeDisplay.textContent = input.type;
}
</script>
</body>
</html>
Clicking different buttons changes the input type dynamically and updates the display. The input appearance changes accordingly based on the new type.
Example − Complete Week Input Management
Following example demonstrates comprehensive usage of the type property with week inputs −
<!DOCTYPE html>
<html>
<head>
<title>Week Input Type Management</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Week Selector</h2>
<form>
<fieldset style="padding: 15px; border: 1px solid #ccc;">
<legend>Event Planning</legend>
<label for="eventWeek">Event Week: </label>
<input type="week" id="eventWeek" value="2024-W20">
<br><br>
<button type="button" onclick="showInfo()">Show Input Info</button>
<button type="button" onclick="switchToText()">Switch to Text Input</button>
<div id="info" style="margin-top: 10px; padding: 10px; background: #f9f9f9;"></div>
</fieldset>
</form>
<script>
function showInfo() {
var input = document.getElementById("eventWeek");
var info = document.getElementById("info");
info.innerHTML = "<strong>Input Details:</strong><br>" +
"Type: " + input.type + "<br>" +
"Value: " + input.value + "<br>" +
"ID: " + input.id;
}
function switchToText() {
var input = document.getElementById("eventWeek");
input.type = "text";
var info = document.getElementById("info");
info.innerHTML = "<strong>Input type changed to: </strong>" + input.type;
}
</script>
</body>
</html>
This example shows how the type property can be used in practical scenarios for dynamic form management.
Browser Compatibility
The type property is supported in all modern browsers. However, the week input type itself may display differently across browsers, with some showing a week picker and others falling back to text input.
Conclusion
The HTML DOM Input Week type property provides a way to dynamically get or set the input type of week elements. This property is useful for creating flexible forms where input types can be changed based on user interaction or application logic, enabling dynamic form behavior in web applications.
188 Views
