HTML DOM Input DatetimeLocal readOnly Property


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 −

Updated on: 30-Jul-2019

98 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements