HTML | DOM Input DatetimeLocal readOnly Property
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:
After clicking the button:
Note : The <input type=”datetime-local”> element does not show any datetime field/calendar in Firefox.
Supported Browsers:
- Apple Safari
- Internet Explorer
- Firefox
- Google Chrome
- Opera