HTML DOM Input Time readOnly Property

HTMLWeb DevelopmentFront 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 −

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 −

raja
Published on 25-Jul-2019 15:53:24
Advertisements