HTML <input type="datetime-local">: 날짜와 시간 선택

datetime-local 유형의 <input> 요소는 사용자가 날짜와 시간을 입력하거나 선택할 수 있는 컨트롤입니다.

<input type="datetime-local">은 어떤 지역의 현지 날짜 및 시간을 입력하기 위한 컨트롤이지만, 그 지역이 반드시 사용자의 지역인 것은 아닙니다. 즉, 사용자의 실제 현지 시간대에서는 유효하지 않은 날짜와 시간 조합, 예컨대 일광 절약 시간대의 시작으로 인해 생기는 시간 단절 구간이라도 입력을 허용합니다. (일부 모바일 브라우저는 아직 이 동작을 올바르게 구현하지 않고 있습니다)

실제 컨트롤의 외형은 브라우저와 플랫폼에 따라서 모습이 크게 달라질 수 있습니다. 입력받은 값의 형식 검증을 내장한 것을 제외하면 평범한 텍스트 입력 칸일 수도 있고, 쉬운 날짜 선택을 위해 브라우저가 제공하는 달력과 시계를 보여줄 수도 있습니다.

<label for="datetime">날짜와 시간을 선택하세요:
  <input type="datetime-local"
         id="datetime"
         max="2077-06-20T21:00"
         min="2077-06-05T12:30"
         value="2077-06-15T13:27">
</label>

input {
  margin-top: 0.4rem;
}

값

<input type="datetime-local"> 요소의 value 특성은 반드시 유효한 HTML 현지 날짜 및 시간 문자열(명세)이어야 합니다.

JavaScript에서는 HTMLInputElement의 value와 valueAsNumber로 값을 가져올 수 있으며, value는 날짜 및 시간 문자열, valueAsNumber는 타임스탬프를 반환합니다.

const dateControl = document.querySelector('input[type="datetime-local"]')
dateControl.value = '2017-06-01T00:00'
console.log(dateControl.value) // '2017-06-01T00:00'
console.log(dateControl.valueAsNumber) // 1496275200000, JavaScript 타임스탬프 (밀리초)

추가 특성

datetime-local 유형은 모든 <input> 요소가 공유하는 특성 외에도 아래의 특성을 추가로 지원합니다.

autocomplete

사용자 에이전트의 자동완성 기능에 제공하는 힌트입니다. HTML autocomplete 특성 문서를 참고하세요.

list

추천 선택지 목록을 나타내는 <datalist> 요소의 ID를 지정합니다. <input>의 유형에 사용할 수 없는 선택지는 무시합니다. 추천 선택지는 어디까지나 추천으로, 사용자는 자신이 원하는 다른 값을 직접 입력할 수 있습니다.

max

선택할 수 있는 날짜 및 시간의 최대 한계입니다. 입력한 값이 이 날짜의 시간 이후인 경우 제약 검증에 실패합니다. max 특성은 반드시 유효한 HTML 날짜 및 시간 문자열이어야 합니다. 유효하지 않은 값을 입력하면 최대 한계를 지정하지 않은 것으로 취급합니다.

max와 min 특성을 모두 지정하는 경우, max는 min과 같거나 그 이후를 가리키는 날짜 및 시간 문자열이어야 합니다.

min

선택할 수 있는 날짜 및 시간의 최소 한계입니다. 입력한 값이 이 날짜의 시간 이전인 경우 제약 검증에 실패합니다. min 특성은 반드시 유효한 HTML 현지 날짜 및 시간 문자열이어야 합니다. 유효하지 않은 값을 입력하면 최소 한계를 지정하지 않은 것으로 취급합니다.

max와 min 특성을 모두 지정하는 경우, min은 nax와 같거나 그 이후를 가리키는 날짜 및 시간 문자열이어야 합니다.

readonly

불리언 특성입니다. 지정하면 사용자가 값을 편집할 수 없습니다.

required

불리언 특성입니다. 양식을 제출하려면 사용자가 반드시 이 <input>에 값을 입력해야 합니다.

step

선택 가능한 값의 간격입니다. 숫자 또는 any를 지정할 수 있습니다. 간격의 기준 값은 min 특성이 존재하면 min, value가 존재하면 value, 둘 다 존재하지 않으면 1970-01-01T00:00:00입니다.

숫자를 지정할 경우, 수의 단위는 1초입니다. step의 기본 값은 60이므로 기본 간격은 1분입니다. (datetime-local의 step에 any를 지정하는 경우의 동작은 아직 불분명합니다)

유효성 검증

datetime-local 유형의 기본 설정에서는 입력된 값의 형식만 검증합니다. 브라우저 기본 인터페이스로는 유효한 값만 입력할 수 있다는 점은 유용한 점이지만 입력 칸을 아예 비워두는 경우는 막지 않습니다. 또한 datetime-local 유형을 지원하지 않는 브라우저에서는 일반 텍스트 입력 칸으로 대체되므로 2월 30일처럼 잘못된 날짜를 입력하는 사용자를 막을 수 없습니다.

min과 max 특성으로 선택 가능한 날짜 및 시간을 제한하는 경우 (선택 가능한 날짜 및 시간 범위 제한하기를 참고하세요), datetime-local 유형을 지원하는 브라우저에서는 범위를 벗어난 값을 제출하려고 하면 오류를 표시합니다. 하지만 미지원 브라우저에서는 범위 검증을 하지 않으므로 사용자의 제출 값을 다시 확인할 필요가 있습니다.

required 특성으로 날짜 및 시간을 반드시 입력하게 설정할 수 있습니다. 사용자가 날짜 및 시간을 입력하지 않고 양식을 제출하려고 하면 브라우저가 오류를 표시합니다. 필수 입력 설정은 datetime-local 입력 칸이 텍스트 입력 칸으로 대체된 경우에도 동작합니다.

예제

선택 가능한 날짜 및 시간 범위 제한하기

min과 max 특성을 지정하면 사용자가 선택할 수 있는 날짜를 특정 범위로 제한할 수 있습니다. 이 예제에서는 2022년 4월 1일 9시부터 2022년 4월 30일 22시까지의 날짜만 선택할 수 있도록 입력 범위를 제한합니다.

<label>일정을 추가할 날짜와 시간을 선택하세요.
  <input type="datetime-local" name="schedule" min="2022-04-01T09:00" max="2022-04-30T22:00" />
</label>

시간대 정보 추가하기

datetime-local 유형은 시간대를 직접 설정할 방법을 제공하지 않습니다. 과거에 존재했던 datetime 유형은 날짜 및 시간에 더해 시간대 설정까지 지원한 입력 칸이었지만, 사용자 인터페이스와 경험에 관련해 제기된 우려사항들과 브라우저의 구현 의지 부족으로 인해 지금은 명세에서 제외됐습니다.

사용자 시간대 정보만 전송하기

단순히 현재 사용자의 시간대를 제출하기만 하면 되는 경우에는 hidden 입력 칸에 적절한 값을 지정하면 됩니다. 제출 버튼을 눌러보세요.

<form>
  <input name="datetime" type="datetime-local" value="2077-12-31T14:00">
  <input name="timezone-offset" type="hidden">
  <button type="submit">제출</button>
</form>
<output></output>

output {
  display: block;
  margin-top: 0.5em;
  white-space: pre-wrap;
}

const form = document.querySelector('form')
const output = document.querySelector('output')

// 현재 브라우저의 시간대 오프셋 지정
document.querySelector('input[name=timezone-offset]').value = new Date().getTimezoneOffset()
// 또는, 사용자가 개인 설정에서 선택한 시간대 값 가져오기

form.addEventListener('submit', (e) => {
  e.preventDefault()
  output.textContent = `datetime: ${form.elements['datetime'].value}\n`
  output.textContent += `timezone offset: ${form.elements['timezone-offset'].value}`
})

시간대 선택지 제공하기

제출 전에 사용자가 직접 시간대를 선택할 수 있도록 <select> 요소를 제공하는 방법도 있습니다.

<select name="timezone">
  <!-- ... -->
  <option value="Asia/Macau">마카오</option>
  <option value="Asia/Taipei">타이베이</option>
  <option value="Asia/Seoul">서울</option>
  <option value="Asia/Tokyo">도쿄</option>
  <!-- ... -->
</select>

미지원 브라우저 대응

브라우저가 datetime-local 입력 칸을 지원하지 않으면 text 입력 칸으로 우아하게 저하됩니다. 하지만 저하된 입력 칸은 사용자 인터페이스의 일관성을 깨고, 데이터 처리 방식에 차이를 만든다는 문제가 있습니다.

더 심각한 문제도 있습니다. datetime-local 입력 칸이 지원되는 브라우저에서는 입력 칸의 값을 yyyy-mm-ddT00:00, yyyy-mm-ddT00:00:00, yyyy-mm-ddT00:00:00.000 등의 형식으로 정규화합니다. 하지만 일반 텍스트 입력 칸에는 날짜 및 시간 형식 제한같은 것이 존재하지 않으므로 정규화할 수도 없는데, 사람들이 입력하는 날짜 및 시간 형식은 다양합니다.

• yyyymmdd
• yymmdd
• yyyy/mm/dd
• yyyy/mm/dd hh:mm (24시간 형식)
• yyyy/mm/dd (오후/오전) hh:mm (12시간 형식)

이 문제를 우회하는 법 중 하나는 datetime-local 입력 칸에 pattern 특성을 지정하는 겁니다. datetime-local 입력 칸은 pattern 특성을 따르지 않지만, 저하된 text 입력 칸은 유효성 검증에 활용합니다. 예를 들어, 아래 예제를 미지원 브라우저 중 하나에서 확인해 보세요.

<form>
  <label>태어난 날짜와 시간을 입력하세요:
    <input type="datetime-local" name="bdaytime" required pattern="\d{4}-\d{2}-\d{2}T\d{2}:\d{2}" />
    <span class="validity"></span>
  </label>
  <div>
    <button type="submit">제출</button>
  </div>
</form>

생년월일과 시간을 ####-##-##T##:##의 형식(#은 0~9의 숫자)에서 벗어나게 입력한 채 제출을 시도하면 브라우저가 오류를 표시할 겁니다. 물론 이 방법은 형식만 제한할 수 있으므로 9999-99-99T99:99처럼 완전히 잘못된 값도 막을 수 없습니다. 게다가 사용자는 생년월일과 시간을 반드시 이 규칙에 맞춰서 작성해야 하는데, 그걸 설명해야 하는 일이 남아있습니다.

지금으로서는, 크로스 브라우저 날짜 입력이 필요하면 연/월/일과 시/분을 각각 분리된 컨트롤에 입력하게 하거나 JavaScript 라이브러리를 쓰는 편이 좋습니다.

명세

HTML Living Standard

브라우저 호환성

같이 보기

• 날짜 전용 입력 칸: <input type="date">