HTML DOM의 Input DatetimeLocal 객체는 type 속성이 datetime-local로 지정된 <input> HTML 요소를 JavaScript에서 다룰 수 있도록 해주는 인터페이스입니다. 이 객체를 활용하면 날짜와 시간을 함께 선택하는 입력 필드를 동적으로 생성하고, 값이나 다양한 속성을 자유롭게 제어할 수 있습니다.
기본 문법 (Syntax)
DatetimeLocal 입력 필드는 아래 두 가지 방식으로 사용할 수 있습니다.
1. HTML에서 직접 작성하기
<input type="datetime-local" id="myDatetime">
2. JavaScript로 동적으로 생성하기
var datetimeLocalObject = document.createElement("input");
datetimeLocalObject.type = "datetime-local";주요 속성 (Attributes)
Input DatetimeLocal 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| autocomplete | datetime-local 필드의 자동 완성(autocomplete) 속성 값을 정의합니다. |
| autofocus | 페이지가 처음 로드될 때 해당 datetime-local 필드에 자동으로 포커스를 설정할지 여부를 지정합니다. |
| defaultValue | datetime-local 필드의 기본값(default value)을 설정하거나 반환합니다. |
| disabled | datetime-local 필드의 비활성화(disabled) 또는 활성화 상태를 정의합니다. |
| form | 해당 datetime-local 필드가 포함된 폼(form) 요소에 대한 참조를 반환합니다. |
| max | datetime-local 필드에 입력 가능한 최대(max) 날짜·시간 값을 설정하거나 반환합니다. |
| min | datetime-local 필드에 입력 가능한 최소(min) 날짜·시간 값을 설정하거나 반환합니다. |
| name | datetime-local 필드의 name 속성 값을 정의합니다. |
| readOnly | datetime-local 필드가 읽기 전용(read-only)인지 여부를 정의합니다. |
| required | 폼 제출 시 datetime-local 필드의 입력이 필수(required)인지 여부를 정의합니다. |
| step | datetime-local 필드의 step 속성 값, 즉 시간 간격 단위를 정의합니다. |
| type | datetime-local 필드의 폼 요소 유형(type)을 반환합니다. 항상 "datetime-local"입니다. |
| value | datetime-local 필드의 현재 값(value)을 설정하거나 반환합니다. |
주요 메서드 (Methods)
Input DatetimeLocal 객체는 값을 조정하는 데 유용한 메서드도 제공합니다.
| 메서드 | 설명 |
|---|---|
| stepDown(n) | datetime-local 필드의 값을 지정한 분(minute) 단위만큼 감소시킵니다. |
| stepUp(n) | datetime-local 필드의 값을 지정한 분(minute) 단위만큼 증가시킵니다. |
활용 예제
다음은 JavaScript로 datetime-local 입력 필드를 생성하고 값을 설정하는 간단한 예제입니다.
var input = document.createElement("input");
input.type = "datetime-local";
input.value = "2024-06-15T14:30";
input.min = "2024-01-01T00:00";
input.max = "2024-12-31T23:59";
document.body.appendChild(input);이처럼 HTML DOM Input DatetimeLocal 객체를 사용하면 날짜·시간 입력 필드를 세밀하게 제어할 수 있어, 예약 시스템이나 일정 관리 기능을 구현할 때 특히 유용합니다.