정의 및 사용 방법

<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 속성

기본값을 설정합니다.
이 값은 사용자가 아무런 입력을 하지 않을 때 처음 표시되는 날짜를 지정합니다.

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

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

min 속성

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

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

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

max 속성

선택할 수 있는 최대 날짜를 설정합니다.
이 값은 사용자가 선택할 수 있는 가장 마지막 날짜를 지정합니다.

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

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

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>
브라우저에서 실제 표시된 모습 아무 날짜도 선택하지 않고 '제출'버튼을 클릭해보세요!
브라우저가 필수 입력에 대한 오류 메시지를 표시하는 것을 확인할 수 있습니다.

접근성 고려 사항

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

브라우저 호환성

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

명세서

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

참고문헌

같이 보기