HTML DOM Input Datetime readOnly Property



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>

Output

This will produce the following output βˆ’

Before clicking β€˜Confirm Datetime’ button βˆ’

After clicking β€˜Confirm Datetime’ button βˆ’

Updated on: 2019-07-30T22:30:26+05:30

86 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements