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

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

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

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

input {
  margin-top: 0.4rem;
}

값

date 유형의 값은 유효한 HTML 날짜 문자열입니다.

사용자의 화면에 나타나는 날짜의 형식은 date 입력 칸이 실제로 저장하는 값과는 다른 형식을 사용합니다. 사용자에게 보이는 날짜 형식은 브라우저의 로케일에 따라 달라지지만, 실제 저장 값과 value 특성은 항상 YYYY-MM-DD 형식을 사용합니다.

JavaScript에서는 HTMLInputElement의 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> 요소가 공유하는 특성을 지원하지만, 일부는 외관에 영향을 주지 못할 수도 있습니다. 예를 들어 size와 placeholder 특성을 지정해도 차이가 없을 수 있습니다.

max

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

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

min

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

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

step

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

숫자를 지정할 경우, 수의 단위는 1일입니다. step의 기본 값은 1이므로 기본 간격은 1일입니다. any를 지정하거나 특성을 누락할 경우 1을 지정한 것과 같습니다.

유효성 검증

date 유형의 기본 설정에서는 값의 형식만 검증합니다. 브라우저 기본 인터페이스에 유효하지 않은 형식의 값을 입력할 수 없다는 점은 유용합니다.

min과 max 특성으로 선택 가능한 날짜를 제한하는 경우 (선택 가능한 날짜 범위 제한하기를 참고하세요), 범위를 벗어난 값을 제출하려고 하면 오류를 표시합니다.

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

예제

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

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

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

명세

• HTML Standard

브라우저 호환성

같이 보기

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