HTML DOM의 Input Date disabled 속성은 날짜 입력 필드(<input type="date">)가 현재 활성화되어 있는지, 아니면 비활성화되어 있는지를 설정하거나 그 상태를 반환하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 특정 조건에 따라 날짜 선택 기능을 동적으로 제어할 수 있습니다.
문법(Syntax)
disabled 속성의 기본 문법은 다음과 같습니다.
- 현재 상태를 불리언 값(true/false)으로 반환
inputDateObject.disabled
- disabled 속성에 불리언 값을 설정하여 상태 변경
inputDateObject.disabled = booleanValue
불리언 값(Boolean Value)
"booleanValue"에 지정할 수 있는 값과 그 의미는 아래 표와 같습니다.
| booleanValue | 설명 |
|---|---|
| true | 날짜 입력 필드가 비활성화되어 있음을 의미합니다. 사용자가 해당 필드에 접근하거나 값을 변경할 수 없습니다. |
| false | 날짜 입력 필드가 비활성화되지 않았음(활성화 상태)을 의미하며, 이것이 기본값입니다. |
예제
다음은 Input Date disabled 속성을 실제로 활용한 예제입니다. 초기에는 비활성화된 날짜 입력 필드가 화면에 표시되며, 버튼을 클릭하면 자바스크립트가 disabled 속성을 false로 변경하여 필드를 활성화합니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Date Disabled</title>
</head>
<body>
<form>
날짜 선택: <input type="date" id="dateSelect" disabled>
</form>
<button onclick="enableDateInput()">날짜 입력 활성화</button>
<div id="divDisplay"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDate = document.getElementById("dateSelect");
divDisplay.textContent = '날짜 입력 비활성화 여부: '+inputDate.disabled;
function enableDateInput() {
inputDate.disabled = false;
divDisplay.textContent = '날짜 입력 비활성화 여부: '+inputDate.disabled;
}
</script>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'날짜 입력 활성화' 버튼을 클릭하기 전 − 날짜 입력 필드가 회색으로 표시되며 클릭해도 달력이 열리지 않고, 하단에는 "날짜 입력 비활성화 여부: true"라는 텍스트가 출력됩니다.
'날짜 입력 활성화' 버튼을 클릭한 후 − 날짜 입력 필드가 정상적으로 활성화되어 사용자가 날짜를 직접 선택할 수 있게 되며, 표시 텍스트도 "날짜 입력 비활성화 여부: false"로 갱신됩니다.
활용 팁
disabled 속성은 폼 유효성 검사나 단계별 입력 흐름을 구현할 때 유용합니다. 예를 들어, 앞선 항목이 완료되기 전까지 날짜 선택 필드를 잠가 두었다가 조건 충족 시 자동으로 활성화하는 방식으로 사용자 경험을 개선할 수 있습니다. 또한 비활성화된 입력 요소는 폼 제출 시 값이 전송되지 않으므로, 데이터 전송 여부를 고려한 설계가 필요합니다.