HTML DOM의 Input Date 객체는 type="date" 속성을 가진 HTML <input> 요소를 나타냅니다. 이 객체를 사용하면 자바스크립트로 날짜 입력 필드를 동적으로 생성하고, 값을 읽거나 수정할 수 있습니다.
문법(Syntax)
날짜 타입의 input 요소를 생성하는 기본 문법은 다음과 같습니다.
type이 date인 <input> 요소 생성하기
var dateObject = document.createElement("input");
dateObject.type = "date";주요 속성(Attributes)
위에서 생성한 dateObject는 다음과 같은 속성들을 가질 수 있습니다.
| 속성 | 설명 |
|---|---|
| autocomplete | 날짜 필드의 autocomplete 속성값을 정의합니다. |
| autofocus | 페이지가 처음 로드될 때 해당 날짜 필드에 자동으로 포커스가 설정될지 여부를 지정합니다. |
| defaultValue | 날짜 필드의 기본값을 설정하거나 반환합니다. |
| disabled | 날짜 필드의 비활성화/활성화 여부를 정의합니다. |
| form | 해당 날짜 필드를 포함하고 있는 상위 form 요소에 대한 참조를 반환합니다. |
| max | 날짜 필드의 max 속성값을 설정하거나 반환합니다. |
| min | 날짜 필드의 min 속성값을 설정하거나 반환합니다. |
| name | 날짜 필드의 name 속성값을 정의합니다. |
| readOnly | 날짜 필드가 읽기 전용인지 여부를 정의합니다. |
| required | 폼 제출 시 해당 날짜 필드의 입력이 필수인지 여부를 정의합니다. |
| step | 날짜 필드의 step 속성값을 정의합니다. |
| type | 날짜 필드의 폼 요소 타입을 반환합니다. |
| value | 날짜 필드의 value 속성값을 정의합니다. |
메서드(Methods)
Input Date 객체에서 사용할 수 있는 주요 메서드는 다음과 같습니다.
| 메서드 | 설명 |
|---|---|
| stepDown() | 날짜 필드의 값을 지정한 일수만큼 감소시킵니다. |
| stepUp() | 날짜 필드의 값을 지정한 일수만큼 증가시킵니다. |
예제: max 속성 활용하기
다음은 Input Date의 max 속성을 활용한 예제입니다. 버튼 클릭 시 날짜 선택 가능 범위의 최대값(max)을 동적으로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Date Max</title>
</head>
<body>
<form>
Date Select: <input type="date" id="date" name="DateSelect" max="2018-12-31">
</form>
<button onclick="getMaxDate()">Change Max Date</button>
<div id="divDisplay"></div>
<script>
var inputDate = document.getElementById("date");
var divDisplay = document.getElementById("divDisplay");
divDisplay.textContent = 'Max of date input: '+inputDate.max;
function getMaxDate() {
var oldInputDate = inputDate.max;
inputDate.max = '2020-12-31';
divDisplay.textContent = 'Max of date input: '+inputDate.max;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
'Change Max Date' 버튼 클릭 전 — 초기 max 값인 2018-12-31이 표시됩니다.
'Change Max Date' 버튼 클릭 후 — max 값이 2020-12-31로 변경되어 화면에 표시됩니다.
이처럼 Input Date 객체의 max, min 등의 속성을 활용하면 사용자가 선택할 수 있는 날짜 범위를 유연하게 제어할 수 있어, 예약 시스템이나 일정 관리 폼 등에서 매우 유용하게 사용됩니다.