HTML DOM Input Datetime readOnly Property

HTMLWeb DevelopmentFront End Technology

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

Following is the syntax −

  • Returning boolean value - true/false
inputDatetimeObject.readOnly
  • Setting readOnly to booleanValue
inputDatetimeObject.readOnly = booleanValue

Boolean Values

Here, “booleanValue” can be the following −

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

Let us see an example of Input Datetime readOnly property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Input Datetime readOnly</title>
</head>
<body>
<form>
Final Exam Datetime: <input type="datetime" id="datetimeSelect" value="2023-08-24T10:30Z">
</form>
<button onclick="finalizeDatetime()">Confirm Datetime</button>
<div id="divDisplay"></div>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputDatetime = document.getElementById("datetimeSelect");
   divDisplay.textContent = 'Exam Datetime Finalized: '+inputDatetime.readOnly;
   function finalizeDatetime() {
      inputDatetime.readOnly = true;
      divDisplay.textContent = 'Exam Datetime: '+inputDatetime.value;
   }
</script>
</body>
</html>

Output

This will produce the following output −

Before clicking ‘Confirm Datetime’ button −

After clicking ‘Confirm Datetime’ button −

raja
Published on 23-Jul-2019 17:54:33
Advertisements