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 Date disabled Property
The HTML DOM Input Date disabled property controls whether a date input field is enabled or disabled. When disabled is set to true, the date input becomes unresponsive to user interaction and appears grayed out. This property is useful for conditionally enabling or disabling date selection based on application logic.
Syntax
Following is the syntax for getting the disabled state −
inputDateObject.disabled
Following is the syntax for setting the disabled state −
inputDateObject.disabled = booleanValue
Parameters
The disabled property accepts a boolean value −
| Value | Description |
|---|---|
| true | The date input field is disabled and cannot be interacted with by the user. |
| false | The date input field is enabled and can be interacted with (default value). |
Return Value
The property returns a boolean value indicating whether the date input is disabled (true) or enabled (false).
Example − Enabling a Disabled Date Input
Following example demonstrates how to check and modify the disabled state of a date input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Date Disabled Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 15px;">
<h2>Date Input Control</h2>
<form>
<label for="dateSelect">Select Date: </label>
<input type="date" id="dateSelect" disabled>
</form>
<br>
<button onclick="enableDateInput()">Enable Date Input</button>
<button onclick="disableDateInput()">Disable Date Input</button>
<div id="status" style="margin-top: 15px; padding: 10px; background-color: #f0f0f0; border: 1px solid #ccc;"></div>
<script>
var dateInput = document.getElementById("dateSelect");
var statusDiv = document.getElementById("status");
function updateStatus() {
statusDiv.textContent = 'Date Input disabled: ' + dateInput.disabled;
}
function enableDateInput() {
dateInput.disabled = false;
updateStatus();
}
function disableDateInput() {
dateInput.disabled = true;
updateStatus();
}
// Initialize status display
updateStatus();
</script>
</body>
</html>
The output shows a date input that starts disabled and can be toggled between enabled and disabled states −
Date Input Control Select Date: [disabled date input field - grayed out] [Enable Date Input] [Disable Date Input] Date Input disabled: true
Example − Conditional Date Input Based on Checkbox
Following example shows how to conditionally enable a date input based on a checkbox selection −
<!DOCTYPE html>
<html>
<head>
<title>Conditional Date Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 15px;">
<h2>Event Registration Form</h2>
<form>
<label>
<input type="checkbox" id="attendEvent" onchange="toggleDateInput()">
I will attend the event
</label>
<br><br>
<label for="eventDate">Select Event Date: </label>
<input type="date" id="eventDate" disabled>
<br><br>
<button type="button" onclick="showSelection()">Show Selection</button>
</form>
<div id="result" style="margin-top: 15px; padding: 10px; background-color: #e8f4f8; border: 1px solid #4caf50;"></div>
<script>
function toggleDateInput() {
var checkbox = document.getElementById("attendEvent");
var dateInput = document.getElementById("eventDate");
dateInput.disabled = !checkbox.checked;
if (!checkbox.checked) {
dateInput.value = "";
}
}
function showSelection() {
var dateInput = document.getElementById("eventDate");
var result = document.getElementById("result");
if (dateInput.disabled) {
result.textContent = "Date input is disabled. Please check 'I will attend' first.";
} else {
result.textContent = "Selected date: " + (dateInput.value || "No date selected");
}
}
</script>
</body>
</html>
The date input becomes enabled only when the checkbox is checked, demonstrating practical form validation −
Event Registration Form ? I will attend the event Select Event Date: [disabled date input] [Show Selection] Date input is disabled. Please check 'I will attend' first.
Example − Dynamic Date Range Control
Following example demonstrates enabling date inputs based on a dropdown selection −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Date Range</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 15px;">
<h2>Trip Booking Form</h2>
<form>
<label for="tripType">Trip Type: </label>
<select id="tripType" onchange="handleTripChange()">
<option value="">Select Trip Type</option>
<option value="oneWay">One Way</option>
<option value="roundTrip">Round Trip</option>
</select>
<br><br>
<label for="departureDate">Departure Date: </label>
<input type="date" id="departureDate" disabled>
<br><br>
<label for="returnDate">Return Date: </label>
<input type="date" id="returnDate" disabled>
</form>
<div id="info" style="margin-top: 15px; padding: 10px; background-color: #fff3cd; border: 1px solid #ffeaa7;">
Please select a trip type to enable date selection.
</div>
<script>
function handleTripChange() {
var tripType = document.getElementById("tripType").value;
var departureDate = document.getElementById("departureDate");
var returnDate = document.getElementById("returnDate");
var info = document.getElementById("info");
if (tripType === "") {
departureDate.disabled = true;
returnDate.disabled = true;
info.textContent = "Please select a trip type to enable date selection.";
} else if (tripType === "oneWay") {
departureDate.disabled = false;
returnDate.disabled = true;
returnDate.value = "";
info.textContent = "One-way trip selected. Choose departure date only.";
} else if (tripType === "roundTrip") {
departureDate.disabled = false;
returnDate.disabled = false;
info.textContent = "Round trip selected. Choose both departure and return dates.";
}
}
</script>
</body>
</html>
The date inputs are selectively enabled based on the trip type, providing a user-friendly form experience.
Browser Compatibility
The disabled property is supported across all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. The date input type itself requires HTML5 support, which is available in all current browser versions.
Conclusion
The HTML DOM Input Date disabled property provides programmatic control over date input availability. By setting it to true or false, you can dynamically enable or disable date selection based on user interactions, form validation, or application logic, creating more intuitive and user-friendly web forms.
191 Views
