정의 및 사용 방법

<input> 태그의 type="date"는 사용자가 달력 형태의 인터페이스를 통해 직접 날짜를 선택할 수 있는 입력 필드를 나타냅니다.
이 필드는 유효성 검사 기능을 통해서 잘못된 날짜 형식이나 불가능한 날짜 입력(예: 2월 31일)을 방지합니다.

<input type="date">는 사용자가 요일 정보, 인접한 날짜 등을 비교해 보면서 특정 날짜를 선택해야 할 때 유용합니다.

기본 예제

HTML 
<label for="user-date">날짜 선택</label>
<input type="date" id="user-date">
실제 적용된 모습

달력 형태의 인터페이스는 브라우저와 운영 체제에 따라 다르게 표시될 수 있습니다. 하지만, 기능은 동일합니다.

입력되는 날짜 형식은 어떻게 되나요?

YYYY-MM-DD

<input type="date">는 YYYY-MM-DD 형식으로 날짜를 입력하고 처리합니다.
이는 연도(Year), 월(Month), 일(Day)을 의미하며, 국제 표준 ISO 8601에 따라 날짜를 일관되게 표현합니다.

다음은 value 속성을 사용하여 기본값으로 표시할 날짜를 YYYY-MM-DD 형식으로 설정한 예시입니다.

HTML 
<input type="date" value="2024-10-17">
실제 적용된 모습

위 예제에서 날짜는 "2024년 10월 17일"을 의미하며, 이 형식이 표준화되어 있어 지역에 상관없이 날짜를 동일하게 표현할 수 있습니다.

관련 속성 사용하기

<input type="date">의 관련된 속성에 대해 알아보겠습니다.

value 속성

value 속성은 초깃값을 설정합니다.
이 속성의 값으로는 페이지 로드 시 필드에서 선택된 날짜를 지정합니다.

날짜는 YYYY-MM-DD 형식으로 입력해야 합니다.

HTML 
<input type="date" value="2024-10-17">
브라우저에서 실제 표시된 모습

min 속성

min 속성은 선택할 수 있는 허용 가능한 최소 날짜를 설정합니다.
즉, 사용자가 선택할 수 있는 가장 첫 번째 날짜를 지정합니다.

날짜는 YYYY-MM-DD 형식으로 입력해야 합니다.

HTML 
<input type="date" value="2024-10-17" min="2024-10-08">
브라우저에서 실제 표시된 모습

브라우저에서 제공하는 기본 UI에서는, min로 지정된 날짜 이전의 날짜를 사용자가 선택할 수 없도록 자동으로 제한합니다.

브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 날짜가 지정된 최소 날짜 이전인지 아닌지 유효성 검사를 시행합니다.

max 속성

max 속성은 선택할 수 있는 최대 날짜를 설정합니다.
즉, 사용자가 선택할 수 있는 가장 마지막 날짜를 지정합니다.

날짜는 YYYY-MM-DD 형식으로 입력해야 합니다.

HTML 
<input type="date" value="2024-10-17" min="2024-10-08" max="2024-10-24">
브라우저에서 실제 표시된 모습

브라우저에서 제공하는 기본 UI에서는, max로 지정된 날짜 이후의 날짜를 사용자가 선택할 수 없도록 자동으로 제한합니다.

브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 날짜가 지정된 최대 날짜 이후인지 아닌지 유효성 검사를 시행합니다.

step 속성

step 속성은 사용자가 입력 가능한 날짜 간격을 지정합니다. 0보다 큰 정수 또는 값의 간격(step)에 제한이 없음을 의미하는 any를 사용할 수 있습니다.
이 속성으로 지정하는 값이 날짜 간격으로 작용합니다. 예를 들어, step="1"은 1일 간격으로 날짜를 조정하며, step="2"로 설정하면 2일 간격으로 날짜를 선택할 수 있습니다. 아무것도 지정하지 않으면 기본값인 step="1"이 적용됩니다.

브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 날짜가 지정된 간격과 일치하는지 유효성 검사를 시행합니다.

min 속성이 존재하고 그 값에 오류가 없는 경우 그 값을 기준으로 맞춰진 step 속성 값의 간격이 조정됩니다. value 속성이 존재하고 그 값에 오류가 없는 경우 그 값을 기준으로 맞춰진 step 속성 값의 간격이 조정됩니다. 단, 유효한 min이 설정되어 있다면 min 속성의 값을 기준으로 간격이 조정됩니다.

예제

다음은 선택 가능한 날짜의 간격을 step="2"로 지정하여 2일 간격으로 날짜를 선택하도록 설정한 예제입니다.

HTML 
<input type="date" step="2" value="2024-10-17">
브라우저에서 실제 표시된 모습

readonly 속성

readonly 속성은 컨트롤을 변경 혹은 편집할 수 없게 만듭니다.
이 속성은 부울 속성(Boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

주로 value 속성과 함께 사용하여 사용자에게 입력되어 있거나 저장되어 있는 컨트롤의 값을 보여주되 편집할 수 없게 할 때 사용합니다.

하지만, value 속성을 직접 설정할 수 있는 자바스크립트로는 여전히 해당 컨트롤의 값을 변경할 수 있습니다.

HTML 
<input type="date" step="2" value="2024-10-17" readonly>
브라우저에서 실제 표시된 모습

required 속성

required 속성은 폼 제출 시 사용자가 사전에 반드시 날짜를 선택해야 하는 필수(required) 컨트롤 요소임을 나타냅니다. 이 속성은 부울 속성(Boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<form>
    <label for="user-date">날짜 선택(*필수)</label>
    <input type="date" id="user-date" required> <!-- 필수 입력 필드로 지정 -->
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습 아무 날짜도 선택하지 않고 '제출'버튼을 클릭해보세요!
브라우저가 필수 입력에 대한 오류 메시지를 표시하는 것을 확인할 수 있습니다.

name 속성

name 속성은 해당 요소의 이름을 나타냅니다.
name 속성이 지정되어 있으면, 그 값을 참조하여 폼 제출 시 전송되는 데이터의 이름으로 사용됩니다. 자바스크립트에서도 name 속성의 값을 참조하여 해당 요소의 form.elements API의 이름으로 사용됩니다.

list 속성

list 속성은 해당 <input type="date">에 미리 정의된 옵션 목록을 제공하는 <datalist> 태그의 id 속성 값을 지정합니다.

부연설명
<datalist> 태그는 웹 양식 관련 컨트롤에서 사용할 수 있는 미리 정의된 옵션 데이터 목록을 나타냅니다.

Firfox 브라우저 호환성 주의
데스크탑의 Firfox 브라우저와 모바일용 Firfox에서는 list 속성을 지원하지 않을 수 있습니다.
사용 전 최신 브라우저 호환성을 확인해 보세요.

사용자는 이 미리 정의된 옵션 목록에서 선택하거나 다른 날짜를 선택할 수 있습니다. 사용자가 컨트롤을 클릭하거나 두 번 클릭하면 해당하는 권장 값이 드롭다운 메뉴에 표시됩니다.

HTML 
<label for="user-date">방문 날짜 선택</label>
<input type="date" list="date-list" id="user-date">

<!-- 드롭다운 메뉴에 표시 -->
<datalist id="date-list">
    <option value="2025-10-17"></option>
    <option value="2025-10-18"></option>
    <option value="2025-10-19"></option>
</datalist>
실제 적용된 모습

접근성 고려 사항

<input type="date">을 사용할 때에는 <label>을 함께 사용해야 합니다.
자세한 사항은 <input> 태그의 접근성 고려 사항을 참조하세요.

브라우저 호환성

마지막 업데이트 정보:

input type 속성의 date 값에 대한 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<input type="date"> 20 12 53 14.1
list 20 12 아니오 14.1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

input type 속성의 date 값에 대한 명세서 사양
명세서 사양
<input type="date"> HTML Standard
#date-state-(type=date)

참고문헌

같이 보기