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 disabled Property
The HTML DOM Input Time disabled property sets or returns whether a time input field is enabled or disabled. When an input time element is disabled, it becomes non-editable and appears grayed out, preventing user interaction.
Syntax
Following is the syntax for returning the disabled property −
inputTimeObject.disabled
Following is the syntax for setting the disabled property −
inputTimeObject.disabled = booleanValue
Parameters
Here, booleanValue can be one of the following −
| Value | Description |
|---|---|
true |
Disables the input time element (non-editable, grayed out) |
false |
Enables the input time element (default state, editable) |
Return Value
The property returns a Boolean value −
-
trueif the input time element is disabled -
falseif the input time element is enabled
Example − Disabling Time Input
Following example demonstrates how to disable a time input field after confirming a meeting −
<!DOCTYPE html>
<html>
<head>
<title>Input Time disabled Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<fieldset>
<legend>Meeting Scheduler</legend>
<label for="timeSelect">Meeting Time: </label>
<input type="time" id="timeSelect" value="15:10">
<br><br>
<button onclick="confirmMeeting()">Confirm Meeting</button>
<div id="result" style="margin-top: 10px; font-weight: bold;"></div>
</fieldset>
<script>
function confirmMeeting() {
var timeInput = document.getElementById("timeSelect");
var result = document.getElementById("result");
timeInput.disabled = true;
result.textContent = "Meeting confirmed at: " + timeInput.value;
}
</script>
</body>
</html>
Initially, the time input is editable. After clicking "Confirm Meeting", the input becomes disabled and grayed out.
Example − Checking Disabled Status
Following example shows how to check if a time input is currently disabled −
<!DOCTYPE html>
<html>
<head>
<title>Check Time Input Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<label for="myTime">Select Time: </label>
<input type="time" id="myTime" value="09:30">
<br><br>
<button onclick="toggleDisabled()">Toggle Disabled</button>
<button onclick="checkStatus()">Check Status</button>
<p id="status"></p>
<script>
function toggleDisabled() {
var timeInput = document.getElementById("myTime");
timeInput.disabled = !timeInput.disabled;
}
function checkStatus() {
var timeInput = document.getElementById("myTime");
var statusText = document.getElementById("status");
if (timeInput.disabled) {
statusText.textContent = "Time input is currently DISABLED";
statusText.style.color = "red";
} else {
statusText.textContent = "Time input is currently ENABLED";
statusText.style.color = "green";
}
}
</script>
</body>
</html>
This example allows you to toggle the disabled state and check the current status of the time input field.
Example − Enabling Previously Disabled Input
Following example demonstrates how to re-enable a disabled time input −
<!DOCTYPE html>
<html>
<head>
<title>Enable/Disable Time Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Appointment Booking</h3>
<label for="appointmentTime">Appointment Time: </label>
<input type="time" id="appointmentTime" value="14:00" disabled>
<br><br>
<button onclick="enableInput()">Edit Appointment</button>
<button onclick="disableInput()">Lock Appointment</button>
<script>
function enableInput() {
var timeInput = document.getElementById("appointmentTime");
timeInput.disabled = false;
console.log("Time input enabled");
}
function disableInput() {
var timeInput = document.getElementById("appointmentTime");
timeInput.disabled = true;
console.log("Time input disabled");
}
</script>
</body>
</html>
The time input starts disabled (note the disabled attribute in HTML). Users can enable it to make changes or disable it again to lock the selection.
Key Points
- When a time input is disabled, it cannot receive focus or user input
- Disabled time inputs are not included in form submissions
- The visual appearance changes to indicate the disabled state (typically grayed out)
- You can set the initial disabled state using the HTML
disabledattribute - The property accepts only Boolean values (
trueorfalse)
Conclusion
The HTML DOM Input Time disabled property provides programmatic control over the enabled/disabled state of time input fields. It is useful for creating dynamic forms where certain inputs need to be locked after user actions, such as confirming appointments or preventing accidental changes to important time values.
180 Views
