HTML DOM Input Datetime readOnly Property

HTML Web Development Front 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 −

booleanValue	Details
true	It defines that the input datetime is readOnly.
false	It 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>