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 readOnly Property
The HTML DOM Input DatetimeLocal readOnly property sets or returns whether a datetime-local input field can be modified by the user. When set to true, the input field becomes read-only and cannot be edited, though it remains focusable and its value can still be selected and copied.
Syntax
Following is the syntax for getting the readOnly property −
inputDatetimeLocalObject.readOnly
Following is the syntax for setting the readOnly property −
inputDatetimeLocalObject.readOnly = booleanValue
Parameters
The booleanValue parameter accepts the following values −
| Value | Description |
|---|---|
true |
Makes the datetime-local input field read-only. User cannot modify the value. |
false |
Makes the datetime-local input field editable. User can modify the value (default behavior). |
Return Value
This property returns a Boolean value indicating whether the datetime-local input field is read-only (true) or editable (false).
Example
Following example demonstrates how to use the readOnly property to control user interaction with a datetime-local input −
<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal readOnly Property</title>
<style>
form {
width: 70%;
margin: 20px auto;
text-align: center;
font-family: Arial, sans-serif;
}
input, button {
padding: 8px;
margin: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
background-color: #007bff;
color: white;
cursor: pointer;
}
#divDisplay {
margin-top: 15px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Examination Slot Booking</legend>
<label for="datetimeLocalSelect">Select Examination Slot: </label>
<input type="datetime-local" id="datetimeLocalSelect" value="2024-12-15T14:30">
<br><br>
<button type="button" onclick="confirmSlotBooking()">Confirm Slot</button>
<button type="button" onclick="enableEditing()">Enable Editing</button>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
// Display initial state
divDisplay.textContent = 'ReadOnly Status: ' + inputDatetimeLocal.readOnly + ' (Field is editable)';
function confirmSlotBooking() {
inputDatetimeLocal.readOnly = true;
divDisplay.textContent = 'Slot Confirmed! ReadOnly Status: ' + inputDatetimeLocal.readOnly +
', Your Slot: ' + inputDatetimeLocal.value;
}
function enableEditing() {
inputDatetimeLocal.readOnly = false;
divDisplay.textContent = 'ReadOnly Status: ' + inputDatetimeLocal.readOnly + ' (Field is now editable)';
}
</script>
</body>
</html>
The output shows a datetime-local input field with buttons to control its read-only state −
Examination Slot Booking Select Examination Slot: [2024-12-15T14:30] [Confirm Slot] [Enable Editing] ReadOnly Status: false (Field is editable)
When "Confirm Slot" is clicked, the field becomes read-only and displays the confirmation message. The "Enable Editing" button allows the field to be modified again.
Checking ReadOnly Status
Following example shows how to check and display the current readOnly status of a datetime-local input −
<!DOCTYPE html>
<html>
<head>
<title>Check ReadOnly Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Check ReadOnly Status</h3>
<input type="datetime-local" id="testInput" value="2024-12-20T10:00" readonly>
<button onclick="checkStatus()">Check Status</button>
<p id="statusDisplay"></p>
<script>
function checkStatus() {
var input = document.getElementById("testInput");
var status = input.readOnly;
var statusText = status ? "Read-Only (cannot be edited)" : "Editable";
document.getElementById("statusDisplay").textContent =
"Current Status: " + status + " - " + statusText;
}
</script>
</body>
</html>
This example includes a datetime-local input that is initially read-only (using the HTML readonly attribute). Clicking the button displays the current status −
Check ReadOnly Status [2024-12-20T10:00] [Check Status] Current Status: true - Read-Only (cannot be edited)
Key Points
-
The readOnly property only prevents user input modification. The value can still be changed programmatically via JavaScript.
-
Read-only datetime-local fields remain focusable and their values can be selected and copied.
-
The HTML
readonlyattribute and the DOMreadOnlyproperty work together - changing one affects the other. -
Read-only fields are still included in form submissions, unlike disabled fields.
Conclusion
The readOnly property provides JavaScript control over whether a datetime-local input field can be edited by users. Setting it to true makes the field read-only while preserving its value for form submission, and setting it to false restores normal editing functionality.
239 Views
