HTML Input Time defaultValue Property: Setting the Default Time

The HTML <input type="time"> element provides a user interface for selecting a time. The defaultValue property allows you to set the initial, or default, time value displayed in the input field when the page loads. This is useful for providing a starting point for users or pre-filling the field with a time that is likely to be relevant.

Definition and Purpose

The defaultValue property of the <input type="time"> element sets or returns the default time value. This value is what the input field displays when the page is initially loaded or when the form is reset. It serves as a hint or a pre-selected value, enhancing user experience by reducing the need to manually enter frequently used times.

Syntax

Setting the defaultValue in JavaScript:

timeInput.defaultValue = "hh:mm";

Retrieving the defaultValue in JavaScript:

let defaultTime = timeInput.defaultValue;

Values

The defaultValue property accepts a string in the format "hh:mm" (24-hour format) representing the hour and minute.

• hh: Represents the hour (00 to 23).
• mm: Represents the minute (00 to 59).

Practical Examples

Let’s explore some practical examples of how to use the defaultValue property with the <input type="time"> element.

Setting a Default Time

This example demonstrates how to set a default time for the time input field using JavaScript.

<label for="timeInput1">Select a time:</label>
<input type="time" id="timeInput1" name="timeInput1" />
<script>
  const timeInput1 = document.getElementById("timeInput1");
  timeInput1.defaultValue = "09:00"; // Set default time to 9:00 AM
</script>

In this example, the time input field will initially display “09:00” when the page loads.

Retrieving the Default Time

This example shows how to retrieve the default time value set on the time input field.

<label for="timeInput2">Select a time:</label>
<input type="time" id="timeInput2" name="timeInput2" value="14:30" />
<script>
  const timeInput2 = document.getElementById("timeInput2");
  let defaultTime2 = timeInput2.defaultValue;
  console.log("Default time:", defaultTime2); // Output: Default time: 14:30
</script>

This code retrieves the default time (“14:30”) and logs it to the console.

Using defaultValue with Form Reset

The defaultValue is particularly useful when resetting a form. This example demonstrates how the time input field reverts to its defaultValue when the form is reset.

<form id="myForm">
  <label for="timeInput3">Select a time:</label>
  <input type="time" id="timeInput3" name="timeInput3" value="18:00" />
  <button type="reset">Reset Form</button>
</form>
<script>
  const timeInput3 = document.getElementById("timeInput3");
  timeInput3.defaultValue = "08:00"; // Set default time to 8:00 AM
  const myForm = document.getElementById("myForm");
  myForm.addEventListener("reset", () => {
    setTimeout(() => {
      console.log("Form reset. Time value:", timeInput3.value); // Logs the default value after reset
    }, 0);
  });
</script>

When the “Reset Form” button is clicked, the time input field will revert to its defaultValue of “08:00”.

Dynamic Default Value

You can dynamically set the defaultValue based on certain conditions or data.

<label for="timeInput4">Select a time:</label>
<input type="time" id="timeInput4" name="timeInput4" />
<script>
  const timeInput4 = document.getElementById("timeInput4");
  const currentTime = new Date();
  let hours = currentTime.getHours().toString().padStart(2, "0");
  let minutes = currentTime.getMinutes().toString().padStart(2, "0");
  timeInput4.defaultValue = `${hours}:${minutes}`; // Set default time to current time
</script>

This example sets the defaultValue of the time input field to the current time when the page loads.

Interaction with the value Attribute

The value attribute in HTML and the defaultValue property in JavaScript serve different purposes, but they interact in important ways.

• value Attribute: This attribute sets the initial value of the input field when the HTML is first parsed. It’s a static setting defined in the HTML.
• defaultValue Property: This property sets the default value that the input field will revert to when the form is reset. It can be dynamically modified using JavaScript.

If both are set, the value attribute will be the initial value displayed. However, after the user changes the input field and then resets the form, the input field will revert to the defaultValue, not the original value.

<form id="myForm2">
  <label for="timeInput5">Select a time:</label>
  <input type="time" id="timeInput5" name="timeInput5" value="10:00" />
  <button type="reset">Reset Form</button>
</form>
<script>
  const timeInput5 = document.getElementById("timeInput5");
  timeInput5.defaultValue = "14:00"; // Set default time to 2:00 PM
  const myForm2 = document.getElementById("myForm2");
  myForm2.addEventListener("reset", () => {
    setTimeout(() => {
      console.log("Form reset. Time value:", timeInput5.value);
    }, 0);
  });
</script>

In this example, the time input field initially displays “10:00”. If the user changes the time and then clicks the “Reset Form” button, the time input field will revert to “14:00” (the defaultValue).

Notes

• The defaultValue property does not change the current value of the input field; it only sets the default value that will be used when the form is reset. 📝
• The time must be in 24-hour format (hh:mm). Invalid formats may be ignored. ⚠️
• Setting the defaultValue dynamically with JavaScript allows for flexible initialization based on user preferences or other conditions. 💡
• The defaultValue can be retrieved and used for various purposes, such as logging or further processing. ✅

Browser Support

The <input type="time"> element and its defaultValue property are supported by all modern browsers.

• Chrome
• Edge
• Firefox
• Safari
• Opera

Conclusion

The defaultValue property of the HTML <input type="time"> element is a useful feature for setting the initial or default time value in a time input field. It enhances user experience by providing a starting point or pre-filling the field with a relevant time. Understanding how to use this property effectively can lead to more user-friendly and efficient web forms.