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

datetime-local 유형의 <input> 요소는 사용자가 날짜와 시간을 모두 선택할 수 있는 컨트롤입니다. 입력 컨트롤의 외형은 브라우저와 운영체제에 따라 다릅니다. 값은 YYYY-MM-DDThh:mm 형식으로 정규화됩니다.

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

input {
  margin-top: 0.4rem;
}

<input type="datetime-local">은 “어떤 지역의 현지 날짜 및 시간”을 입력하기 위한 컨트롤이지만, “어떤 지역”이 사용자의 지역은 아닙니다. 즉, 사용자의 실제 현지 시간대에서는 유효하지 않은 날짜와 시간 조합, 예컨대 일광 절약 시간대의 시작으로 인해 생기는 1시간의 단절 구간이라도 입력을 허용합니다.

값

datetime-local 유형의 value 특성은 반드시 유효한 HTML 현지 날짜 및 시간 문자열이어야 합니다.

사용자의 화면에 나타나는 날짜 및 시간의 형식은 datetime-local 입력 칸이 실제로 저장하는 값과는 다른 형식을 사용합니다. 사용자에게 보이는 날짜 및 시간 형식은 브라우저의 로케일에 따라 달라지지만, 실제 저장 값과 value 특성은 항상 유효한 HTML 현지 날짜 및 시간 문자열 형식 중 하나를 사용합니다. 예를 들어, 문서 처음의 예제에서 사용자는 “2077-06-15 오후 01:27”을 볼 수도 있지만, 실제 value는 2077-06-15T13:27일 것입니다.

JavaScript에서는 HTMLInputElement의 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> 요소가 공유하는 특성 외에도 아래의 특성을 추가로 지원합니다.

max

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

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

min

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

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

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 특성으로 날짜 및 시간을 반드시 입력하게 설정할 수 있습니다. 사용자가 날짜 및 시간을 입력하지 않고 양식을 제출하려고 하면 브라우저가 오류를 표시합니다.

예제

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

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 입력 칸에 적절한 값을 지정하면 됩니다.

<input name="timezone" type="hidden" value="-09:00">

사용자가 시간대를 직접 선택하도록 하려면 <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>

두 경우 모두 날짜와 시간은 시간대와 별도 데이터로 제출됩니다. 서버에서는 데이터를 저장하기 전에 시간대 정보를 적절히 처리해야 합니다.

명세

HTML Standard

브라우저 호환성

같이 보기

• 날짜 입력 칸: <input type="datetime-local">
• 연도와 월 입력 칸: <input type="month">
• 시간 입력 칸: <input type="time">