HTML DOM Input Date readOnly Property

HTMLWeb DevelopmentFront End Technology

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 −

booleanValueDetails
trueIt defines that the input date is readOnly.
falseIt defines that the input date is not readOnly and can be modified.

Example

Let us see an example of Input Date readOnly property −

 Live Demo

<!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 −

After clicking ‘Confirm Date’ button −

raja
Published on 19-Jul-2019 15:04:52
Advertisements