HTML DOM의 Input Datetime 객체는 HTML에서 type="datetime"으로 지정된 <input> 요소를 자바스크립트로 다룰 수 있게 해주는 인터페이스입니다. 참고로 사파리(Safari)를 제외한 주요 브라우저들은 datetime 타입을 일반 텍스트 입력 필드처럼 처리합니다.
또한 datetime 타입은 현재 HTML 표준에서 폐기(deprecated)된 상태이며, 실무에서는 날짜와 시간을 함께 다루는 datetime-local 타입을 사용하는 것이 권장됩니다. 다만 레거시 코드 유지보수 시에는 여전히 알아둘 필요가 있습니다.
문법(Syntax)
datetime 타입의 <input> 요소를 생성하는 기본 문법은 다음과 같습니다.
var datetimeObject = document.createElement("input");
datetimeObject.type = "datetime";주요 속성(Attributes)
datetimeObject에서 사용할 수 있는 주요 속성은 아래 표와 같습니다.
| 속성 | 설명 |
|---|---|
| autocomplete | datetime 필드의 autocomplete(자동 완성) 속성 값을 설정하거나 반환합니다. |
| autofocus | 페이지가 처음 로드될 때 해당 datetime 필드에 자동으로 포커스를 줄지 여부를 정의합니다. |
| defaultValue | datetime 필드의 기본값(default value)을 설정하거나 반환합니다. |
| disabled | datetime 필드의 비활성화/활성화 상태를 정의합니다. |
| form | 해당 datetime 필드가 속한 폼(form)을 반환하거나 설정합니다. |
| min | datetime 필드에 입력 가능한 최소 날짜/시간(min 속성 값)을 반환하거나 설정합니다. |
| max | datetime 필드에 입력 가능한 최대 날짜/시간(max 속성 값)을 반환하거나 설정합니다. |
| name | datetime 필드의 name 속성 값을 정의합니다. |
| readOnly | datetime 필드가 읽기 전용인지 여부를 정의합니다. |
| required | 폼 제출 시 해당 datetime 필드의 입력이 필수인지 여부를 정의합니다. |
| step | datetime 필드의 step(증감 단위) 속성 값을 정의합니다. |
| type | datetime 필드의 폼 요소 타입을 반환합니다. |
| value | datetime 필드의 value 속성 값을 정의합니다. |
메서드(Methods)
값을 증감할 때 활용할 수 있는 메서드도 제공됩니다.
| 메서드 | 설명 |
|---|---|
| stepDown() | datetime 필드의 값을 지정한 숫자만큼 감소시킵니다. |
| stepUp() | datetime 필드의 값을 지정한 숫자만큼 증가시킵니다. |
예제: Input Datetime min 속성
다음은 min 속성을 활용한 예제입니다. 버튼을 클릭하면 datetime 필드의 최소 허용 날짜가 변경되는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Min</title>
</head>
<body>
<form>
Date & Time: <input type="datetime" id="dateTime" name="DateSelect" value="2009-6-24T20:49Z" min="2008-12-31T23:59:59Z">
</form>
<button onclick="minDateDecrease()">Decrease min age bar</button>
<div id="divDisplay"></div>
<script>
var inputDatetime = document.getElementById("dateTime");
var divDisplay = document.getElementById("divDisplay");
divDisplay.textContent = 'Minimum Age Bar: '+inputDatetime.min;
function minDateDecrease() {
inputDatetime.min = '2010-12-31T23:59:59Z';
divDisplay.textContent = 'Minimum Age Bar: '+inputDatetime.min;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Decrease min age bar' 버튼을 클릭하기 전 화면입니다.
버튼을 클릭한 후에는 min 값이 2010-12-31T23:59:59Z로 변경되어 화면에 표시됩니다.
이처럼 Input Datetime 객체를 활용하면 자바스크립트만으로 날짜·시간 입력 필드의 최솟값, 기본값, 활성화 상태 등을 동적으로 제어할 수 있습니다.