HTML | DOM Input Month readOnly Property

The DOM Input Month readOnly property in HTML DOM is used to set or return whether the Input Month Field should be read-only or not.
It can be copied but can’t be modified.

Syntax:

It returns the readOnly property.
```
monthObject.readOnly
```
It is used to set the readOnly property.
```
monthObject.readOnly = "true|false"
```

Property Values:

true: It sets the readOnly property of Month field.
false: It is the default value. It defines the Month field is not read-only.

Return Value: It returns a boolean value which represents the Month field is read-only or not.

Example-1: This example returns the Input Month readOnly property.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
     HTML DOM Input Month readOnly Property 
    </title> 
</head> 
  
<body style="text-align:center;"> 
  
    <h1>GeeksForGeeks</h1> 
  
    <h2> 
      DOM Input Month readOnly Property 
  </h2> 
    <form id="myGeeks"> 
        <input type="month" 
               id="month_id" 
               name="geeks" 
               readOnly> 
    </form> 
    <br> 
    <button onclick="myGeeks()"> 
      Click Here! 
  </button> 
  
    <p id="GFG" 
       style="font-size:20px;"> 
  </p> 
  
    <!-- Script to return 
      the readOnly property-->
    <script> 
        function myGeeks() { 
            
            var gfg =  
                document.getElementById( 
                  "month_id").readOnly; 
            
            document.getElementById( 
              "GFG").innerHTML = gfg; 
        } 
    </script> 
</body> 
  
</html> 

Output
Before clicking on the button:

After clicking on the button:

Example-2: This Example illustrates how to set or change the readOnly property.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML DOM Input Month readOnly Property 
    </title> 
</head> 
  
<body style="text-align:center;"> 
  
    <h1>GeeksForGeeks</h1> 
  
    <h2>DOM Input Month readOnly Property</h2> 
    <form id="myGeeks"> 
        <input type="month" 
               id="month_id" 
               name="geeks" 
               readOnly> 
    </form> 
    <br> 
    <button onclick="myGeeks()"> 
      Click Here! 
  </button> 
  
    <p id="GFG" 
       style="font-size:20px;"> 
  </p> 
  
    <!-- Script to set the  
     readOnly Property-->
    <script> 
        function myGeeks() { 
            
            var gfg =  
                document.getElementById( 
                  "month_id"); 
            gfg.readOnly = false; 
            var g = gfg.readOnly; 
            
            document.getElementById( 
              "GFG").innerHTML = g; 
        } 
    </script> 
</body> 
  
</html> 

Output:
Before clicking on the button:

After clicking on the button:

Supported Browsers: The browser supported by DOM input Month readOnly Property are listed below:

Google Chrome
Internet Explorer 10.0 +
Firefox
Opera
Safari

Note: In Firefox, the input type=”month” element does not show any date field or calendar.

My Personal Notes

Recommended Posts: