HTML | DOM Input DatetimeLocal readOnly Property
Last Updated :
16 Jun, 2023
The Input DatetimeLocal readOnly property is used to set or return whether a datetimeLocal field should be read-only, or not. Once a field has been declared read-only, it cannot be further modified. However, the read-only field can be tabbed, highlighted and can be used for copying text. The HTML readonly attribute is reflected by the Input DatetimeLocal readOnly property.
Syntax:
- To return the readOnly property:
datetimelocalObject.readOnly
- To set the readOnly property:
datetimelocalObject.readOnly = true|false
Property Value:
- true|false : It is used to specify whether the datetimeLocal field will be read-only or not. It is false by default.
Return Value : It returns a Boolean value that represents whether the Input DateTimeLocal field would be readOnly or not.
Below program illustrates the DatetimeLocal readOnly property :
Example: Setting a datetimeLocal field to read-only.
html
<!DOCTYPE html>
<html>
<head>
<title>
Input DatetimeLocal
readOnly Property in HTML
</title>
<style>
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
Input DatetimeLocal readOnly Property
</h2>
<br> Date Of Birth:
<input type="datetime-local"
id="Test_DatetimeLocal"
name="DOB">
<p>
To set the date time to read-only,
double-click the "Set Read-Only" button.
</p>
<button ondblclick="My_DatetimeLocal()">
Set Read-Only
</button>
<script>
function My_DatetimeLocal() {
document.getElementById(
"Test_DatetimeLocal").readOnly =
true;
}
</script>
</body>
</html>
|
Output:
Note : The <input type=”datetime-local”> element does not show any datetime field/calendar in Firefox.
Supported Browsers:
- Google Chrome 20
- Edge 12
- Firefox 93
- Opera 11
- Safari 14.1
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...