HTML DOM Input Time readOnly Property


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 −

booleanValueDetails
trueIt defines that the input time field is readOnly.
falseIt 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>

Output

This will produce the following output −

Before clicking ‘Edit Time’ button −

After clicking ‘Edit Time’ button −

Updated on: 30-Jul-2019

55 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements