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 Time defaultValue Property
The HTML DOM Input Time defaultValue property sets or returns the default value of a time input field. This property represents the initial value specified in the HTML value attribute, which remains constant even when the user changes the input value.
The key difference between value and defaultValue is that value changes as the user interacts with the input, while defaultValue always holds the original default value from the HTML markup.
Syntax
Following is the syntax for getting the default value −
inputTimeObject.defaultValue
Following is the syntax for setting the default value −
inputTimeObject.defaultValue = 'string'
Parameters
The defaultValue property accepts a string value in the format HH:MM or HH:MM:SS where −
HH − Hours (00-23)
MM − Minutes (00-59)
SS − Seconds (00-59, optional)
Return Value
The property returns a string representing the default value of the time input field. If no default value is set, it returns an empty string.
Example − Basic Usage
Following example demonstrates how to get and set the defaultValue property −
<!DOCTYPE html>
<html>
<head>
<title>Input Time defaultValue Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Time Input defaultValue Property</h2>
<label for="timeInput">Select Time:</label>
<input type="time" id="timeInput" value="14:30">
<div style="margin: 10px 0;">
<button onclick="showDefaultValue()">Show Default Value</button>
<button onclick="showCurrentValue()">Show Current Value</button>
<button onclick="resetToDefault()">Reset to Default</button>
</div>
<p id="result"></p>
<script>
var timeInput = document.getElementById("timeInput");
var result = document.getElementById("result");
function showDefaultValue() {
result.innerHTML = "Default Value: " + timeInput.defaultValue;
}
function showCurrentValue() {
result.innerHTML = "Current Value: " + timeInput.value;
}
function resetToDefault() {
timeInput.value = timeInput.defaultValue;
result.innerHTML = "Time reset to default value: " + timeInput.defaultValue;
}
</script>
</body>
</html>
The output shows how the default value remains constant while the current value can change −
Time Input defaultValue Property Select Time: [14:30] (time picker) [Show Default Value] [Show Current Value] [Reset to Default] (Output changes based on button clicked)
Example − Meeting Scheduler
Following example shows a practical application using the defaultValue property for a meeting scheduler −
<!DOCTYPE html>
<html>
<head>
<title>Meeting Scheduler</title>
<style>
.container {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
fieldset {
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
}
legend {
font-weight: bold;
color: #333;
}
input[type="button"] {
background-color: #007bff;
color: white;
border: none;
padding: 8px 15px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
}
input[type="button"]:hover {
background-color: #0056b3;
}
#divDisplay {
margin-top: 15px;
font-weight: bold;
color: #28a745;
}
</style>
</head>
<body>
<div class="container">
<fieldset>
<legend>Meeting Time Scheduler</legend>
<label for="TimeSelect">Meeting At:
<input type="time" id="TimeSelect" value="09:30">
</label><br><br>
<input type="button" onclick="changeMeet('Alternate')" value="Set Alternate Time">
<input type="button" onclick="changeMeet('Default')" value="Reset to Default">
<input type="button" onclick="confirmMeet()" value="Confirm Meeting">
<div id="divDisplay"></div>
</fieldset>
</div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputTime = document.getElementById("TimeSelect");
function changeMeet(action) {
if (!inputTime.disabled) {
if (action === 'Alternate') {
inputTime.value = '15:00'; // Set to 3:00 PM
divDisplay.innerHTML = "Time changed to alternate slot: " + inputTime.value;
} else {
inputTime.value = inputTime.defaultValue;
divDisplay.innerHTML = "Time reset to default: " + inputTime.defaultValue;
}
}
}
function confirmMeet() {
inputTime.disabled = true;
divDisplay.innerHTML = 'Meeting confirmed at: ' + inputTime.value;
}
</script>
</body>
</html>
This example demonstrates how the defaultValue property helps maintain the original time setting while allowing temporary changes.
Key Points
The
defaultValueproperty reflects the initial HTMLvalueattribute and never changes during user interaction.The
valueproperty reflects the current user input and changes as the user interacts with the field.Time values must be in 24-hour format (HH:MM or HH:MM:SS).
The property is useful for implementing reset functionality or comparing current values against original defaults.
If no initial value is specified in HTML,
defaultValuereturns an empty string.
Browser Compatibility
The Input Time defaultValue property is supported in all modern browsers that support the HTML5 time input type, including Chrome, Firefox, Safari, and Edge.
Conclusion
The HTML DOM Input Time defaultValue property provides access to the original default value of a time input field, making it essential for implementing reset functionality and maintaining reference to initial values. Unlike the value property, defaultValue remains constant throughout the element's lifecycle.
422 Views
