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 readOnly Property
The HTML DOM Input Date readOnly property is used to control whether a date input field can be modified by the user. When set to true, the date input becomes read-only and users cannot change its value, though it remains focusable and its value is still submitted with forms.
Syntax
Following is the syntax to get the readOnly property value −
inputDateObject.readOnly
Following is the syntax to set the readOnly property −
inputDateObject.readOnly = booleanValue
Property Values
The readOnly property accepts the following boolean values −
| Value | Description |
|---|---|
| true | The input date field becomes read-only and cannot be modified by the user. |
| false | The input date field is editable and can be modified by the user (default behavior). |
Return Value
The property returns a Boolean value indicating whether the date input is read-only (true) or editable (false).
Example − Making Date Input Read-Only
Following example demonstrates how to make a date input read-only after the user confirms their selection −
<!DOCTYPE html>
<html>
<head>
<title>Input Date readOnly Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Exam Date Selection</h2>
<form>
<label for="dateSelect">Final Exam Date: </label>
<input type="date" id="dateSelect" value="2024-12-15">
</form>
<br>
<button onclick="finalizeDate()">Confirm Date</button>
<button onclick="enableEdit()">Enable Edit</button>
<div id="divDisplay" style="margin-top: 10px; font-weight: bold;"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDate = document.getElementById("dateSelect");
// Display initial status
divDisplay.textContent = 'Date is editable: ' + (!inputDate.readOnly);
function finalizeDate() {
if(inputDate.value) {
inputDate.readOnly = true;
divDisplay.textContent = 'Exam Date Finalized: ' + inputDate.value + ' (Read-only)';
} else {
divDisplay.textContent = 'Please select a date first!';
}
}
function enableEdit() {
inputDate.readOnly = false;
divDisplay.textContent = 'Date is now editable again.';
}
</script>
</body>
</html>
In this example, clicking "Confirm Date" makes the input read-only, while "Enable Edit" makes it editable again. The display shows the current status of the date input.
Example − Checking readOnly Status
Following example shows how to check and display the current readOnly status of a date input −
<!DOCTYPE html>
<html>
<head>
<title>Check readOnly Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Date Input Status Checker</h2>
<label for="birthDate">Birth Date: </label>
<input type="date" id="birthDate" value="1990-05-15" readonly>
<br><br>
<label for="appointmentDate">Appointment Date: </label>
<input type="date" id="appointmentDate" value="2024-12-20">
<br><br>
<button onclick="checkStatus()">Check Status</button>
<div id="statusDisplay" style="margin-top: 15px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
function checkStatus() {
var birthDate = document.getElementById("birthDate");
var appointmentDate = document.getElementById("appointmentDate");
var statusDiv = document.getElementById("statusDisplay");
var status = "<h3>Input Status:</h3>";
status += "<p>Birth Date - readOnly: " + birthDate.readOnly + "</p>";
status += "<p>Appointment Date - readOnly: " + appointmentDate.readOnly + "</p>";
statusDiv.innerHTML = status;
}
</script>
</body>
</html>
This example demonstrates checking the readOnly status of multiple date inputs. The birth date input has the HTML readonly attribute set, while the appointment date is editable by default.
Example − Form Validation with readOnly
Following example shows a practical use case where date inputs become read-only after form validation −
<!DOCTYPE html>
<html>
<head>
<title>Form Validation with readOnly</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Registration Form</h2>
<form id="eventForm">
<label for="eventDate">Event Date: </label>
<input type="date" id="eventDate" required>
<br><br>
<label for="registrationDate">Registration Deadline: </label>
<input type="date" id="registrationDate" required>
<br><br>
<button type="button" onclick="validateAndLock()">Lock Dates</button>
<button type="button" onclick="unlockDates()">Unlock Dates</button>
</form>
<div id="message" style="margin-top: 15px; padding: 10px;"></div>
<script>
function validateAndLock() {
var eventDate = document.getElementById("eventDate");
var registrationDate = document.getElementById("registrationDate");
var messageDiv = document.getElementById("message");
if (!eventDate.value || !registrationDate.value) {
messageDiv.innerHTML = "<span style='color: red;'>Please fill in both dates!</span>";
return;
}
if (new Date(registrationDate.value) >= new Date(eventDate.value)) {
messageDiv.innerHTML = "<span style='color: red;'>Registration deadline must be before event date!</span>";
return;
}
// Lock both dates
eventDate.readOnly = true;
registrationDate.readOnly = true;
messageDiv.innerHTML = "<span style='color: green;'>Dates validated and locked successfully!</span>";
}
function unlockDates() {
var eventDate = document.getElementById("eventDate");
var registrationDate = document.getElementById("registrationDate");
var messageDiv = document.getElementById("message");
eventDate.readOnly = false;
registrationDate.readOnly = false;
messageDiv.innerHTML = "<span style='color: blue;'>Dates are now editable.</span>";
}
</script>
</body>
</html>
This example validates that the registration deadline comes before the event date, then locks both inputs to prevent further changes. Users can unlock the dates to make modifications if needed.
Key Points
The
readOnlyproperty only affects user interaction; JavaScript can still modify the value programmatically.Read-only inputs are still submitted with forms, unlike disabled inputs.
The HTML
readonlyattribute and the JavaScriptreadOnlyproperty work together.Read-only inputs can still receive focus and be selected with keyboard navigation.
Setting
readOnlytofalseremoves the read-only restriction.
Conclusion
The HTML DOM Input Date readOnly property provides control over whether users can modify date input values. It is useful for creating forms where certain dates need to be locked after validation or confirmation, while still allowing the values to be submitted and accessed programmatically.
240 Views
