HTML | DOM Input Date readOnly Property
The Input Date readOnly property is used for setting or returning whether a date 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 Date readOnly property.
Syntax:
- For returning the readOnly property:
inputdateObject.readOnly
- For setting the readOnly property:
inputdateObject.readOnly = true|false
Property Value:
- true|false: It is used to specify whether the date field will be read-only or not. It is false by default.
Return Values: It returns a Boolean value which represents that the date field would be readonly or not.
The below program illustrates the Date readOnly property :
Example 1: Setting a date field to read-only.
HTML
<!DOCTYPE html> < html > < head > < title >Input Date readOnly Property in HTML</ title > < style > h1 { color: green; } h2 { font-family: Impact; } body { text-align: center; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >Input Date readOnly Property</ h2 > < br > Date Of Birth: < input type = "date" id = "Test_Date" name = "DOB" > < p >To set the date to read-only, double-click the "Set Read-Only" button.</ p > < button ondblclick = "My_Date()" >Set Read-Only</ button > < p id = "test" ></ p > < script > function My_Date() { document.getElementById("Test_Date").readOnly = true; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
Example 2: Below code returns the date readonly property.
HTML
<!DOCTYPE html> < html > < head > < title >Input Date readOnly Property in HTML</ title > < style > h1 { color: green; } h2 { font-family: Impact; } body { text-align: center; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >Input Date readOnly Property</ h2 > < br > Date Of Birth: < input type = "date" id = "Test_Date" name = "DOB" > < p >To return the date to read-only, double-click the "Return Read-Only" button.</ p > < button ondblclick = "My_Date()" >Return Read-Only</ button > < p id = "test" ></ p > < script > function My_Date() { var g = document.getElementById("Test_Date").readOnly; document.getElementById("test").innerHTML = g } </ script > </ body > </ html > |
Output:
Before double clicking the button:
After double clicking the button:
Supported Web Browsers:
- Apple Safari
- Internet Explorer
- Firefox
- Google Chrome
- Opera