readOnly 속성이란?
HTML DOM의 Input Datetime readOnly 속성은 날짜/시간 입력 필드(<input type="datetime">)를 사용자가 수정할 수 있는지 여부를 설정하거나, 현재 상태를 불리언 값으로 반환합니다. 이 속성을 활용하면 특정 시점 이후에는 날짜와 시간을 변경하지 못하도록 잠글 수 있어, 시험 일정 확정이나 예약 마감 처리 같은 기능을 구현할 때 유용합니다.
문법(Syntax)
readOnly 속성은 값을 가져오는 방식과 설정하는 방식 두 가지로 사용할 수 있습니다.
1. 현재 상태 반환하기
해당 입력 필드가 읽기 전용인지 여부를 true/false 불리언 값으로 반환합니다.
inputDatetimeObject.readOnly
2. readOnly 값 설정하기
booleanValue를 지정하여 읽기 전용 여부를 설정합니다.
inputDatetimeObject.readOnly = booleanValue
불리언 값(Boolean Values)
booleanValue에 사용할 수 있는 값은 다음과 같습니다.
| booleanValue | 설명 |
|---|---|
| true | 날짜/시간 입력 필드가 읽기 전용(수정 불가) 상태로 설정됩니다. |
| false | 날짜/시간 입력 필드가 읽기 전용이 아니며, 사용자가 자유롭게 수정할 수 있습니다. |
예제 코드
다음은 Input Datetime readOnly 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 날짜/시간 입력 필드가 읽기 전용으로 전환됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime readOnly</title>
</head>
<body>
<form>
시험 일시: <input type="datetime" id="datetimeSelect" value="2023-08-24T10:30Z">
</form>
<button onclick="finalizeDatetime()">일시 확정</button>
<div id="divDisplay"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDatetime = document.getElementById("datetimeSelect");
divDisplay.textContent = '시험 일시 확정 여부: ' + inputDatetime.readOnly;
function finalizeDatetime() {
inputDatetime.readOnly = true;
divDisplay.textContent = '확정된 시험 일시: ' + inputDatetime.value;
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'일시 확정' 버튼 클릭 전 – readOnly 값이 false이므로 화면에 '시험 일시 확정 여부: false'가 표시되고, 입력 필드를 자유롭게 수정할 수 있습니다.
'일시 확정' 버튼 클릭 후 – readOnly가 true로 설정되어 입력 필드가 잠기고, '확정된 시험 일시: 2023-08-24T10:30Z'라는 문구가 표시됩니다.
참고 사항
<input type="datetime">은 현재 대부분의 최신 브라우저에서 지원이 중단된 타입입니다. 실무에서는 이를 대체하는 <input type="datetime-local"> 사용을 권장하며, readOnly 속성의 동작 방식은 동일하게 적용됩니다.