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 Object
The HTML DOM Input Week Object represents an HTML input element with type week. This object allows users to select a specific week and year, providing methods and properties for manipulating week-based form inputs programmatically.
Syntax
Following is the syntax to create an input element with type week using JavaScript −
var weekObject = document.createElement("INPUT");
weekObject.type = "week";
You can also access an existing week input element −
var weekObject = document.getElementById("weekId");
Properties
The Input Week Object supports the following properties −
| Property | Description |
|---|---|
| autocomplete | Sets or returns the value of the autocomplete attribute of a week field |
| autofocus | Sets or returns whether the week field should be focused when the page loads |
| defaultValue | Sets or returns the default value of the week field |
| disabled | Sets or returns whether the week field is disabled |
| form | Returns a reference to the form that contains the week field |
| max | Sets or returns the value of the max attribute of the week field |
| min | Sets or returns the value of the min attribute of the week field |
| name | Sets or returns the value of the name attribute of the week field |
| readOnly | Sets or returns whether the week field is read-only |
| required | Sets or returns whether the week field must be filled out before submitting the form |
| step | Sets or returns the value of the step attribute of the week field |
| type | Returns the type of form element the week field is |
| value | Sets or returns the value of the value attribute of the week field |
Methods
The Input Week Object supports the following methods −
| Method | Description |
|---|---|
| stepDown() | Decrements the value of the week field by a specified number |
| stepUp() | Increments the value of the week field by a specified number |
Example − Basic Week Input
Following example demonstrates creating and manipulating a week input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Week Object Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Week Input Example</h2>
<form id="weekForm">
<label for="examWeek">Select Examination Week:</label>
<input type="week" id="examWeek" value="2024-W10" min="2024-W01" max="2024-W52">
<br><br>
<button type="button" onclick="showWeekInfo()">Show Week Information</button>
<button type="button" onclick="stepWeekUp()">Next Week</button>
<button type="button" onclick="stepWeekDown()">Previous Week</button>
</form>
<div id="output" style="margin-top: 15px; padding: 10px; border: 1px solid #ddd;"></div>
<script>
var weekInput = document.getElementById("examWeek");
var output = document.getElementById("output");
function showWeekInfo() {
output.innerHTML = "<strong>Selected Week:</strong> " + weekInput.value +
"<br><strong>Form ID:</strong> " + weekInput.form.id +
"<br><strong>Input Type:</strong> " + weekInput.type;
}
function stepWeekUp() {
weekInput.stepUp(1);
showWeekInfo();
}
function stepWeekDown() {
weekInput.stepDown(1);
showWeekInfo();
}
</script>
</body>
</html>
This example creates a week input with navigation buttons. Clicking "Show Week Information" displays the current value, while "Next Week" and "Previous Week" buttons use the stepUp() and stepDown() methods.
Example − Dynamic Week Input Creation
Following example shows how to create a week input element dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Week Input Creation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Create Week Input Dynamically</h2>
<button onclick="createWeekInput()">Create Week Input</button>
<button onclick="getWeekValue()">Get Week Value</button>
<div id="container" style="margin-top: 20px;"></div>
<div id="result" style="margin-top: 15px; color: blue;"></div>
<script>
function createWeekInput() {
var container = document.getElementById("container");
// Create week input element
var weekObject = document.createElement("INPUT");
weekObject.type = "week";
weekObject.id = "dynamicWeek";
weekObject.value = "2024-W15";
weekObject.min = "2024-W01";
weekObject.max = "2024-W52";
weekObject.required = true;
// Create label
var label = document.createElement("LABEL");
label.innerHTML = "Dynamic Week Input: ";
label.htmlFor = "dynamicWeek";
// Clear container and append elements
container.innerHTML = "";
container.appendChild(label);
container.appendChild(weekObject);
}
function getWeekValue() {
var weekInput = document.getElementById("dynamicWeek");
var result = document.getElementById("result");
if (weekInput) {
result.innerHTML = "<strong>Selected Week:</strong> " + weekInput.value +
"<br><strong>Required:</strong> " + weekInput.required +
"<br><strong>Min Week:</strong> " + weekInput.min +
"<br><strong>Max Week:</strong> " + weekInput.max;
} else {
result.innerHTML = "Please create a week input first!";
}
}
</script>
</body>
</html>
This example demonstrates creating a week input element programmatically and setting its properties like min, max, value, and required.
Example − Week Input Form Validation
Following example shows form validation with week input fields −
<!DOCTYPE html>
<html>
<head>
<title>Week Input Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="scheduleForm">
<fieldset style="padding: 15px;">
<legend>Project Schedule</legend>
<label for="startWeek">Start Week:</label>
<input type="week" id="startWeek" name="startWeek" required><br><br>
<label for="endWeek">End Week:</label>
<input type="week" id="endWeek" name="endWeek" required><br><br>
<button type="button" onclick="validateWeeks()">Validate Schedule</button>
<button type="reset">Reset Form</button>
</fieldset>
</form>
<div id="validation" style="margin-top: 15px; padding: 10px;"></div>
<script>
function validateWeeks() {
var startWeek = document.getElementById("startWeek");
var endWeek = document.getElementById("endWeek");
var validation = document.getElementById("validation");
if (!startWeek.value || !endWeek.value) {
validation.innerHTML = "<span style='color: red;'>Please select both start and end weeks.</span>";
return;
}
if (startWeek.value > endWeek.value) {
validation.innerHTML = "<span style='color: red;'>End week must be after start week.</span>";
} else {
validation.innerHTML = "<span style='color: green;'>Schedule is valid!<br>" +
"Start: " + startWeek.value + "<br>" +
"End: " + endWeek.value + "</span>";
}
}
</script>
</body>
</html>
This example demonstrates form validation by comparing start and end week values, ensuring the end week comes after the start week.
Conclusion
The HTML DOM Input Week Object provides comprehensive control over week-type input elements through properties like value, min, max, and methods like stepUp() and stepDown(). This object is essential for creating interactive forms that handle week-based scheduling, project timelines, and date range selections in web applications.
178 Views
