HTML DOM Input Time Readonly Property

HTML Web Development Front End Technology

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

Syntax

Following is the syntax −

Returning boolean value - true/false

inputTimeObject.readOnly

Setting readOnly to booleanValue

inputTimeObject.readOnly = booleanValue

Boolean Values

Here, “booleanValue” can be the following −

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

Example

Let us see an example of Input Time readOnly property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Input Time readOnly</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Time-readOnly</legend>
<label for="TimeSelect">Appointment with Supervisor:</label>
<input type="time" id="TimeSelect" value="12:45" readOnly>
<input type="button" onclick="changeMeeting()" value="Edit Time">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputTime = document.getElementById("TimeSelect");
   function changeMeeting() {
      if(inputTime.readOnly === true)
         divDisplay.textContent = 'The meeting time cannot be altered';
      else
         divDisplay.textContent = 'The meeting time fixed at: '+inputTime.value;
   }
</script>
</body>
</html>