HTML | DOM Input Date readOnly Property

Last Updated : 21 Sep, 2022

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>GeeksforGeeks</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>GeeksforGeeks</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>