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 readOnly Property
The HTML DOM Input Datetime readOnly property is used to set or return whether a datetime input field can be modified by the user. When set to true, the input becomes read-only and cannot be edited, while false allows normal user interaction.
Syntax
Following is the syntax for returning the readOnly property value −
inputDatetimeObject.readOnly
Following is the syntax for setting the readOnly property −
inputDatetimeObject.readOnly = booleanValue
Parameters
The booleanValue parameter accepts the following values −
| Value | Description |
|---|---|
true |
Makes the datetime input field read-only (cannot be modified by user) |
false |
Makes the datetime input field editable (default behavior) |
Return Value
The property returns a Boolean value − true if the datetime input is read-only, false if it is editable.
Example − Setting readOnly Property
Following example demonstrates how to make a datetime input read-only after confirmation −
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime readOnly Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Registration</h2>
<form>
<label for="eventDateTime">Event Date and Time:</label>
<input type="datetime-local" id="eventDateTime" value="2024-12-25T14:30">
</form>
<br>
<button onclick="confirmDateTime()">Confirm DateTime</button>
<button onclick="enableEdit()">Enable Edit</button>
<div id="status" style="margin-top: 10px; font-weight: bold;"></div>
<script>
var inputDateTime = document.getElementById("eventDateTime");
var status = document.getElementById("status");
// Display initial status
status.textContent = 'ReadOnly Status: ' + inputDateTime.readOnly;
function confirmDateTime() {
inputDateTime.readOnly = true;
status.textContent = 'DateTime confirmed and locked: ' + inputDateTime.value;
status.style.color = 'green';
}
function enableEdit() {
inputDateTime.readOnly = false;
status.textContent = 'DateTime editing enabled. Current value: ' + inputDateTime.value;
status.style.color = 'blue';
}
</script>
</body>
</html>
Initially, the datetime input is editable. Clicking "Confirm DateTime" makes it read-only, while "Enable Edit" restores editing capability −
Event Registration Event Date and Time: [2024-12-25T14:30] [Confirm DateTime] [Enable Edit] ReadOnly Status: false After confirmation: DateTime confirmed and locked: 2024-12-25T14:30 (green text) After enable edit: DateTime editing enabled. Current value: 2024-12-25T14:30 (blue text)
Example − Checking readOnly Status
Following example shows how to check the current readOnly status of a datetime input −
<!DOCTYPE html>
<html>
<head>
<title>Check readOnly Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Appointment Scheduler</h2>
<form>
<label for="appointment">Appointment Time:</label>
<input type="datetime-local" id="appointment" value="2024-01-15T09:00" readonly>
</form>
<br>
<button onclick="checkStatus()">Check Status</button>
<button onclick="toggleReadOnly()">Toggle ReadOnly</button>
<p id="result"></p>
<script>
function checkStatus() {
var appointment = document.getElementById("appointment");
var result = document.getElementById("result");
if (appointment.readOnly) {
result.textContent = "Input is READ-ONLY. Value: " + appointment.value;
result.style.color = "red";
} else {
result.textContent = "Input is EDITABLE. Value: " + appointment.value;
result.style.color = "green";
}
}
function toggleReadOnly() {
var appointment = document.getElementById("appointment");
appointment.readOnly = !appointment.readOnly;
checkStatus(); // Update status display
}
</script>
</body>
</html>
The input starts as read-only (set via HTML readonly attribute). The toggle function switches between editable and read-only states −
Appointment Scheduler Appointment Time: [2024-01-15T09:00] [Check Status] [Toggle ReadOnly] Check Status result: Input is READ-ONLY. Value: 2024-01-15T09:00 (red text) After toggle: Input is EDITABLE. Value: 2024-01-15T09:00 (green text)
Key Points
The
readOnlyproperty can be set dynamically via JavaScript, unlike the HTMLreadonlyattribute which is static.Read-only datetime inputs still submit their values with form data, but users cannot modify them.
The property is case-sensitive in JavaScript − use
readOnly(camelCase), notreadonly.Read-only inputs can still receive focus and trigger events like
onclickoronfocus.The visual appearance of read-only inputs may vary across browsers but typically appears dimmed or grayed out.
Browser Compatibility
The readOnly property is widely supported across modern browsers. However, note that the datetime input type has limited support. Most browsers support datetime-local instead, which provides similar functionality without timezone information.
Conclusion
The HTML DOM Input Datetime readOnly property provides a convenient way to control the editability of datetime inputs dynamically. It accepts boolean values where true makes the input read-only and false allows editing. This property is particularly useful for form validation scenarios where you need to lock certain fields after user confirmation.
121 Views
