HTML DOM Input Date readOnly Property

The HTML DOM Input Date readOnly property sets/returns whether Input Date can be modified or not.

Syntax

Following is the syntax −

Returning boolean value - true/false

inputDateObject.readOnly

Setting readOnly to booleanValue

inputDateObject.readOnly = booleanValue

Boolean Values

Here, “booleanValue” can be the following −

booleanValue	Details
true	It defines that the input date is readOnly.
false	It defines that the input date is not readOnly and can be modified.

Example

Let us see an example of Input Date readOnly property −

<!DOCTYPE html>
<html>
<head>
<title>Input Date readOnly</title>
</head>
<body>
<form>
Final Exam Date: <input type="date" id="dateSelect">
</form>
<button onclick="finalizeDate()">Confirm Date</button>
<div id="divDisplay"></div>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputDate = document.getElementById("dateSelect");
   divDisplay.textContent = 'Exam Date Finalized: '+inputDate.readOnly;
   function finalizeDate() {
      inputDate.readOnly = true;
      divDisplay.textContent = 'Exam Date: '+inputDate.value;
   }
</script>
</body>
</html>

Output

This will produce the following output −

Before clicking ‘Confirm Date’ button −

HTML DOM Input Date readOnly Property

After clicking ‘Confirm Date’ button −

HTML DOM Input Date readOnly Property