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 Datetime disabled Property
The HTML DOM Input Datetime disabled property sets or returns whether an Input Datetime field is enabled or disabled. When set to true, the input field becomes non-interactive and appears grayed out, preventing user input.
Syntax
Following is the syntax for returning the disabled status −
inputDatetimeObject.disabled
Following is the syntax for setting the disabled property −
inputDatetimeObject.disabled = booleanValue
Parameters
The booleanValue parameter accepts the following values −
| Value | Description |
|---|---|
true |
Disables the input datetime field, making it non-interactive and grayed out. |
false |
Enables the input datetime field, allowing user interaction. This is the default value. |
Return Value
The property returns a boolean value −
trueif the input datetime field is disabledfalseif the input datetime field is enabled
Example − Getting Disabled Status
Following example demonstrates how to check if a datetime input field is disabled −
<!DOCTYPE html>
<html>
<head>
<title>Check Datetime Input Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Datetime Input Status Check</h2>
<form>
<label>Date & Time: </label>
<input type="datetime-local" id="datetimeInput" value="2023-12-25T10:30" disabled>
</form>
<br>
<button onclick="checkStatus()">Check Status</button>
<p id="status"></p>
<script>
function checkStatus() {
var inputElement = document.getElementById("datetimeInput");
var isDisabled = inputElement.disabled;
document.getElementById("status").textContent =
"Datetime input is " + (isDisabled ? "disabled" : "enabled");
}
</script>
</body>
</html>
The output shows the current disabled status when the button is clicked −
Datetime input is disabled
Example − Enabling and Disabling Datetime Input
Following example shows how to dynamically enable and disable a datetime input field −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Datetime Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Enable/Disable Datetime Input</h2>
<form>
<label>Event Date & Time: </label>
<input type="datetime-local" id="eventDatetime" value="2023-12-31T23:59" disabled>
</form>
<br>
<button onclick="enableInput()">Enable Input</button>
<button onclick="disableInput()">Disable Input</button>
<p id="statusDisplay">Status: Disabled</p>
<script>
var datetimeInput = document.getElementById("eventDatetime");
var statusDisplay = document.getElementById("statusDisplay");
function enableInput() {
datetimeInput.disabled = false;
statusDisplay.textContent = "Status: Enabled";
statusDisplay.style.color = "green";
}
function disableInput() {
datetimeInput.disabled = true;
statusDisplay.textContent = "Status: Disabled";
statusDisplay.style.color = "red";
}
</script>
</body>
</html>
The buttons allow you to toggle between enabled and disabled states. The status text updates accordingly with color coding −
Status: Enabled (green text when enabled) Status: Disabled (red text when disabled)
Example − Form Validation with Disabled Property
Following example demonstrates using the disabled property in form validation scenarios −
<!DOCTYPE html>
<html>
<head>
<title>Conditional Datetime Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Registration Form</h2>
<form>
<p>
<input type="checkbox" id="scheduleEvent" onchange="toggleDatetime()">
<label for="scheduleEvent">Schedule this event</label>
</p>
<p>
<label>Event DateTime: </label>
<input type="datetime-local" id="eventTime" disabled>
</p>
<button type="button" onclick="submitForm()">Submit</button>
</form>
<p id="result"></p>
<script>
function toggleDatetime() {
var checkbox = document.getElementById("scheduleEvent");
var datetimeInput = document.getElementById("eventTime");
datetimeInput.disabled = !checkbox.checked;
if (!checkbox.checked) {
datetimeInput.value = "";
}
}
function submitForm() {
var datetimeInput = document.getElementById("eventTime");
var result = document.getElementById("result");
if (datetimeInput.disabled) {
result.textContent = "Event scheduling is disabled.";
} else {
result.textContent = datetimeInput.value ?
"Event scheduled for: " + datetimeInput.value :
"Please select a date and time.";
}
}
</script>
</body>
</html>
The datetime input is only enabled when the checkbox is checked, demonstrating conditional form behavior based on the disabled property.
Browser Compatibility
The disabled property is supported in all modern browsers. However, note that the datetime input type has been deprecated in favor of datetime-local. For better browser support, use datetime-local instead of the legacy datetime type.
Conclusion
The HTML DOM Input Datetime disabled property provides an easy way to control the interactivity of datetime input fields. It accepts boolean values and can be used for form validation, conditional inputs, and dynamic user interfaces. Always use datetime-local for better browser compatibility.
214 Views
