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 DatetimeLocal disabled Property
The HTML DOM Input DatetimeLocal disabled property sets or returns whether an Input DatetimeLocal field is enabled or disabled. When set to true, the field becomes uneditable and grayed out, preventing user interaction. When set to false, the field becomes interactive and allows users to select date and time values.
Syntax
Following is the syntax for returning the disabled property −
inputDatetimeLocalObject.disabled
Following is the syntax for setting the disabled property −
inputDatetimeLocalObject.disabled = booleanValue
Parameters
The disabled property accepts the following boolean values −
| Value | Description |
|---|---|
true |
Disables the datetime-local input field, making it uneditable and grayed out. |
false |
Enables the datetime-local input field, allowing user interaction (default value). |
Return Value
The property returns a boolean value −
trueif the datetime-local input is disabledfalseif the datetime-local input is enabled
Example − Enabling a Disabled Field
Following example demonstrates how to enable a disabled datetime-local input field −
<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal Disabled Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Examination Schedule</h2>
<form>
<label for="examDateTime">Examination Time:</label>
<input type="datetime-local" id="examDateTime" value="2024-07-05T14:30" disabled>
<br><br>
<button type="button" onclick="enableDatetimeInput()">Enable Editing</button>
<button type="button" onclick="disableDatetimeInput()">Disable Editing</button>
<br><br>
<p id="status"></p>
</form>
<script>
var inputField = document.getElementById("examDateTime");
var statusDiv = document.getElementById("status");
// Display initial status
updateStatus();
function enableDatetimeInput() {
inputField.disabled = false;
updateStatus();
}
function disableDatetimeInput() {
inputField.disabled = true;
updateStatus();
}
function updateStatus() {
statusDiv.textContent = "DatetimeLocal Input disabled: " + inputField.disabled;
}
</script>
</body>
</html>
The output shows a datetime-local input that can be enabled or disabled using the buttons −
Examination Schedule Examination Time: [2024-07-05T14:30] (grayed out when disabled) [Enable Editing] [Disable Editing] DatetimeLocal Input disabled: true (changes to false when enabled)
Example − Checking Disabled Status
Following example shows how to check if a datetime-local input is disabled and display appropriate messages −
<!DOCTYPE html>
<html>
<head>
<title>Check DatetimeLocal Disabled Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Scheduling</h2>
<label for="eventTime">Event Date & Time:</label>
<input type="datetime-local" id="eventTime" value="2024-12-25T09:00">
<br><br>
<button type="button" onclick="checkStatus()">Check Status</button>
<button type="button" onclick="toggleDisabled()">Toggle Disabled</button>
<br><br>
<div id="message" style="padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9;"></div>
<script>
var eventInput = document.getElementById("eventTime");
var messageDiv = document.getElementById("message");
function checkStatus() {
if (eventInput.disabled) {
messageDiv.innerHTML = "<strong>Status:</strong> The datetime field is currently disabled and cannot be edited.";
messageDiv.style.backgroundColor = "#ffebee";
} else {
messageDiv.innerHTML = "<strong>Status:</strong> The datetime field is enabled and ready for input.";
messageDiv.style.backgroundColor = "#e8f5e8";
}
}
function toggleDisabled() {
eventInput.disabled = !eventInput.disabled;
checkStatus();
}
</script>
</body>
</html>
The output displays status messages that change based on whether the field is disabled or enabled −
Event Scheduling Event Date & Time: [2024-12-25T09:00] [Check Status] [Toggle Disabled] Status: The datetime field is enabled and ready for input. (green background) or Status: The datetime field is currently disabled and cannot be edited. (red background)
Common Use Cases
The disabled property is commonly used in the following scenarios −
Form validation − Disable datetime fields until prerequisite conditions are met
User permissions − Disable editing for users without proper authorization
Data protection − Prevent modification of confirmed or submitted datetime values
Conditional editing − Enable datetime selection only when certain options are chosen
Conclusion
The HTML DOM Input DatetimeLocal disabled property provides control over whether users can interact with datetime-local input fields. Setting it to true disables the field, while false enables user interaction. This property is essential for creating dynamic forms with conditional field access and user-friendly interfaces.
151 Views
