Article Categories

Selected Reading

HTML DOM Input Week defaultValue Property

HTML Web Development Front End Technology

The HTML DOM Input Week defaultValue property sets or returns the default value of a week input field. This property represents the original value attribute specified in the HTML, which remains constant even when the user changes the input field's current value. It is useful for resetting the field back to its original state.

Syntax

Following is the syntax for returning the default value −

inputWeekObject.defaultValue

Following is the syntax for setting the default value −

inputWeekObject.defaultValue = "string"

Parameters

The defaultValue property accepts a string parameter representing a week value in the format YYYY-WNN, where YYYY is the year and NN is the week number (01-53).

Return Value

The property returns a string representing the default value of the week input field in YYYY-WNN format. If no default value was set, it returns an empty string.

Example − Getting and Setting Default Value

Following example demonstrates how to get and set the defaultValue property −

<!DOCTYPE html>
<html>
<head>
   <title>Input Week defaultValue</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Week Input Default Value Demo</h2>
   
   <label for="weekInput">Select Week:</label>
   <input type="week" id="weekInput" value="2024-W15">
   
   <br><br>
   
   <button onclick="showDefaultValue()">Show Default Value</button>
   <button onclick="changeDefaultValue()">Set New Default</button>
   <button onclick="resetToDefault()">Reset to Default</button>
   
   <p id="result"></p>
   
   <script>
      var weekInput = document.getElementById("weekInput");
      var result = document.getElementById("result");
      
      function showDefaultValue() {
         result.innerHTML = "Default Value: " + weekInput.defaultValue;
      }
      
      function changeDefaultValue() {
         weekInput.defaultValue = "2024-W20";
         result.innerHTML = "Default value changed to: " + weekInput.defaultValue;
      }
      
      function resetToDefault() {
         weekInput.value = weekInput.defaultValue;
         result.innerHTML = "Input reset to default value: " + weekInput.defaultValue;
      }
   </script>
</body>
</html>

The output shows buttons to interact with the defaultValue property −

Week Input Default Value Demo
Select Week: [Week Input Field showing 2024-W15]

[Show Default Value] [Set New Default] [Reset to Default]

(Clicking buttons displays corresponding messages about the default value)

Example − Comparing Current Value with Default Value

Following example shows how to compare the current input value with its default value −

<!DOCTYPE html>
<html>
<head>
   <title>Week Input Value Comparison</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Week Value vs Default Value</h2>
   
   <label for="targetWeek">Target Week:</label>
   <input type="week" id="targetWeek" value="2024-W10">
   
   <br><br>
   
   <button onclick="checkValues()">Check Values</button>
   <button onclick="resetWeek()">Reset Week</button>
   
   <div id="display" style="margin-top: 15px; padding: 10px; background-color: #f9f9f9; border-radius: 5px;"></div>
   
   <script>
      var weekInput = document.getElementById("targetWeek");
      var display = document.getElementById("display");
      
      function checkValues() {
         var current = weekInput.value;
         var defaultVal = weekInput.defaultValue;
         
         display.innerHTML = 
            "<strong>Current Value:</strong> " + current + "<br>" +
            "<strong>Default Value:</strong> " + defaultVal + "<br>" +
            "<strong>Values Match:</strong> " + (current === defaultVal ? "Yes" : "No");
      }
      
      function resetWeek() {
         var oldValue = weekInput.value;
         weekInput.value = weekInput.defaultValue;
         display.innerHTML = 
            "Value changed from <strong>" + oldValue + "</strong> to <strong>" + 
            weekInput.defaultValue + "</strong>";
      }
      
      // Show initial values
      checkValues();
   </script>
</body>
</html>

The output displays the current and default values with comparison −

Week Value vs Default Value
Target Week: [Week Input Field]

[Check Values] [Reset Week]

Current Value: 2024-W10
Default Value: 2024-W10  
Values Match: Yes

Key Points

The defaultValue property stores the original value specified in the HTML value attribute.
When a user changes the week input, the value property changes but defaultValue remains constant.
Both properties use the YYYY-WNN format where YYYY is the four-digit year and NN is the week number (01-53).
The defaultValue property is commonly used to reset form fields to their original state.
If no value attribute is specified in HTML, defaultValue returns an empty string.

Browser Compatibility

The Input Week defaultValue property is supported in modern browsers that support the HTML5 week input type, including Chrome, Firefox, Safari, and Edge. However, week input support varies across browsers, so consider providing fallback options for unsupported browsers.

Conclusion

The HTML DOM Input Week defaultValue property provides access to the original value of a week input field. It serves as a reference point for resetting the field and remains unchanged regardless of user interactions, making it essential for form validation and reset functionality.

AmitDiwan

Updated on: 2026-03-16T21:38:54+05:30

188 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next