HTML <input type="date">: 날짜 선택

date 유형의 <input> 요소는 사용자가 날짜를 입력하거나 선택할 수 있는 컨트롤입니다.

<input type="date">의 값은 연도와 월, 일을 포함하지만 시간은 포함하지 않습니다. 시간 입력도 필요하면 time 입력 칸을 추가하거나, datetime-local 유형을 사용하세요.

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

<label for="date">날짜를 선택하세요:
  <input type="date"
         id="date"
         max="2077-06-20"
         min="2077-06-05"
         value="2077-06-15">
</label>

input {
  margin-top: 0.4rem;
}

값

date 유형의 value 특성은 반드시 유효한 HTML 날짜 문자열(명세)이어야 합니다.

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

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

추가 특성

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

autocomplete

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

list

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

max

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

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

min

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

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

readonly

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

required

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

step

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

숫자를 지정할 경우, 수의 단위는 1일입니다. step의 기본 값은 1이므로 기본 간격은 1일입니다. any를 지정할 경우, <input type="date">에서는 1을 입력한 것과 같습니다.

유효성 검증

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

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

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

예제

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

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

<label>일정을 추가할 날짜를 선택하세요.
  <input type="date" name="schedule" min="2022-04-01" max="2022-04-30" />
</label>

미지원 브라우저 대응

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

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

• yyyymmdd
• yymmdd
• yyyy/mm/dd

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

<form>
  <label>생년월일을 입력하세요:
    <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}" />
    <span class="validity"></span>
  </label>
  <div>
    <button type="submit">제출</button>
  </div>
</form>

생년월일을 ####-##-##의 형식(#은 0~9의 숫자)에서 벗어나게 입력한 채 제출을 시도하면 브라우저가 오류를 표시할 겁니다. 물론 이 방법은 형식만 제한할 수 있으므로 9999-99-99처럼 완전히 잘못된 값도 막을 수 없습니다.

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

명세

HTML Living Standard

브라우저 호환성