HTML5는 사용자로부터 날짜와 시간을 입력받을 수 있도록 다양한 <input> 타입을 제공합니다. 그중 datetime과 datetime-local은 이름이 비슷해 헷갈리기 쉬운데, 두 타입의 핵심 차이는 시간대(time zone) 정보의 포함 여부입니다.
datetime이란?
datetime 타입은 연, 월, 일, 시, 분, 초 그리고 소수 단위의 초(fractions of a second)까지 포함하는 날짜와 시간을 ISO 8601 형식으로 인코딩하며, 시간대가 UTC(협정 세계시)로 고정됩니다.
다음은 기본적인 사용 예제입니다.
<!DOCTYPE HTML> <html> <body> <form action = "/cgi-bin/html5.cgi" method = "get"> Date and Time : <input type = "datetime" name = "newinput" /> <input type = "submit" value = "submit" /> </form> </body> </html>
datetime-local이란?
datetime-local 타입 역시 연, 월, 일, 시, 분, 초 및 소수 단위의 초를 포함하는 날짜와 시간을 ISO 8601 형식으로 인코딩하지만, 시간대 정보를 포함하지 않는다는 점이 다릅니다. 즉, 사용자가 입력한 현지 시간 그대로 전송됩니다.
사용 예제는 다음과 같습니다.
<!DOCTYPE HTML> <html> <body> <form action = "/cgi-bin/html5.cgi" method = "get"> Local Date and Time : <input type = "datetime-local" name = "newinput" /> <input type = "submit" value = "submit" /> </form> </body> </html>
두 타입의 핵심 차이 요약
- datetime: 날짜·시간 + UTC 시간대 정보 포함
- datetime-local: 날짜·시간만 포함, 시간대 정보 없음
개발 시 주의사항
datetime 타입은 과거 HTML5 초안에 포함되었지만, 대부분의 주요 브라우저(Chrome, Firefox, Safari 등)에서 지원하지 않아 현재 HTML 표준에서는 제외되었습니다. 반면 datetime-local은 크롬, 엣지, 사파리 등 대부분의 모던 브라우저에서 폭넓게 지원됩니다.
따라서 실무에서는 시간대가 필요한 경우 별도의 선택 필드나 JavaScript 라이브러리를 활용하고, 일반적인 날짜·시간 입력에는 datetime-local을 사용하는 것이 권장됩니다.