HTML DOM Input DatetimeLocal readOnly Property

HTMLWeb DevelopmentFront End Technology

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

Syntax

Following is the syntax −

  • Returning boolean value - true/false
inputDatetimeLocalObject.readOnly
  • Setting readOnly to booleanValue
inputDatetimeLocalObject.readOnly = booleanValue

Boolean Values

Here, “booleanValue” can be the following −

booleanValueDetails
trueIt defines that the input datetimeLocal field is readOnly.
falseIt defines that the input datetimeLocal field is not readOnly and can be modified.

Example

Let us see an example of Input DatetimeLocal readOnly property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal 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>Datetime-Local-readOnly</legend>
<label for="datetimeLocalSelect">Examination Slot :
<input type="datetime-local" id="datetimeLocalSelect" value="2019-05-23T12:45">
</label>
<input type="button" onclick="confirmSlotBooking()" value="Confirm Slot">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
   divDisplay.textContent = 'Slot Confirmed: '+inputDatetimeLocal.readOnly;
   function confirmSlotBooking() {
      inputDatetimeLocal.readOnly = true;
      divDisplay.textContent = 'Slot Confirmed: '+inputDatetimeLocal.readOnly+', Your Slot: '+inputDatetimeLocal.value;
   }
</script>
</body>
</html>

Output

This will produce the following output −

Before clicking ‘Confirm Slot’ button −

After clicking ‘Confirm Slot’ button −

raja
Published on 24-Jul-2019 12:29:31
Advertisements