HTML DOM Input DatetimeLocal readOnly 속성 완벽 정리

HTML DOM의 Input DatetimeLocal readOnly 속성은 datetime-local 입력 필드를 사용자가 수정할 수 있는지 여부를 설정하거나 반환하는 기능을 합니다. 이 속성을 활용하면 특정 상황에서 날짜·시간 선택 필드를 읽기 전용으로 잠그거나, 다시 편집 가능한 상태로 되돌릴 수 있습니다.

문법(Syntax)

readOnly 속성의 사용 문법은 다음과 같습니다.

1. 값 반환하기 (boolean 값)

현재 readOnly 상태를 true 또는 false로 반환합니다.

inputDatetimeLocalObject.readOnly

2. 값 설정하기

readOnly 속성에 boolean 값을 직접 지정할 수 있습니다.

inputDatetimeLocalObject.readOnly = booleanValue

boolean 값 종류

여기서 booleanValue에 들어갈 수 있는 값은 아래와 같습니다.

booleanValue	설명
true	datetime-local 입력 필드가 읽기 전용(readOnly) 상태로 설정되어 수정할 수 없습니다.
false	datetime-local 입력 필드가 읽기 전용이 아니며, 사용자가 자유롭게 값을 변경할 수 있습니다.

예제 코드

아래는 Input DatetimeLocal readOnly 속성을 실제로 활용한 예제입니다. 시험 시간대(Examination Slot)를 선택하고 'Confirm Slot' 버튼을 클릭하면 해당 필드가 읽기 전용으로 전환됩니다.

<!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>

실행 결과

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'Confirm Slot' 버튼 클릭 전

초기 화면에서는 readOnly 값이 false로 표시되며, 사용자가 날짜와 시간을 자유롭게 변경할 수 있습니다.

HTML DOM Input DatetimeLocal readOnly 속성 완벽 정리

'Confirm Slot' 버튼 클릭 후

버튼을 클릭하면 readOnly 속성이 true로 설정되어 입력 필드가 잠기고, 확정된 시간대 정보가 화면에 출력됩니다.

HTML DOM Input DatetimeLocal readOnly 속성 완벽 정리

정리

readOnly 속성은 HTML의 readonly 어트리뷰트와 유사하게 동작하지만, JavaScript를 통해 동적으로 제어할 수 있다는 점이 큰 장점입니다. 예약 확정, 신청 완료 등 사용자가 더 이상 값을 변경하지 못하도록 해야 하는 UI 흐름에서 매우 유용하게 활용할 수 있습니다.