Thuộc tính readOnly của HTML DOM Input DatetimeLocal

Thuộc tính readOnly của đối tượng Input DatetimeLocal xác định xem trường ngày giờ cục bộ có chỉ đọc (không cho chỉnh sửa) hay không.

Cú pháp

Lấy giá trị (true/false)

inputDatetimeLocalObject.readOnly

Thiết lập giá trị

inputDatetimeLocalObject.readOnly = booleanValue

Giá trị Boolean

Ví dụ minh họa

Khóa khung giờ thi sau khi xác nhận:

<!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">Khung giờ thi: <input type="datetime-local" id="datetimeLocalSelect" value="2019-05-23T12:45"> </label>
    <input type="button" onclick="confirmSlotBooking()" value="Xác nhận khung">
    <div id="divDisplay"></div>
  </fieldset>
</form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
  divDisplay.textContent = 'Đã khóa: ' + inputDatetimeLocal.readOnly;
  function confirmSlotBooking() {
    inputDatetimeLocal.readOnly = true;
    divDisplay.textContent = 'Đã khóa: ' + inputDatetimeLocal.readOnly + ', Khung của bạn: ' + inputDatetimeLocal.value;
  }
</script>
</body>
</html>

Kết quả

Ban đầu có thể chỉnh sửa khung giờ. Sau khi nhấn "Xác nhận khung", trường chuyển sang chỉ đọc và hiển thị khung giờ đã chọn.