HTML DOM Input Week readOnly Property

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

Syntax

Following is the syntax −

Returning boolean value - true/false

inputWeekObject.readOnly

Setting readOnly to booleanValue

inputWeekObject.readOnly = booleanValue

Boolean Values

Here, “booleanValue” can be the following −

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

Example

Let us see an example for Input Week readOnly property −

<!DOCTYPE html>
<html>
<head>
<title>Input Week 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>Week-readOnly</legend>
<label for="WeekSelect">Examination Week:
<input type="week" id="WeekSelect" value="2019-W36">
</label>
<input type="button" onclick="confirmWeek()" value="Confirm Week">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputWeek = document.getElementById("WeekSelect");
   divDisplay.textContent = 'Week Confirmed: '+inputWeek.readOnly;
   function confirmWeek() {
      inputWeek.readOnly = true;
      divDisplay.textContent = 'Week Confirmed: '+inputWeek.readOnly;
   }
</script>
</body>
</html>

Output

This will produce the following output −

Before clicking ‘Confirm Week’ button −

HTML DOM Input Week readOnly Property

After clicking ‘Confirm Week’ button −

HTML DOM Input Week readOnly Property