<input type="date">
<input> 태그의 type="date"는 사용자가 달력 형태의 인터페이스를 통해 직접 날짜를 선택할 수 있는 입력 필드를 나타냅니다.
이 필드는 유효성 검사 기능을 통해서 잘못된 날짜 형식이나 불가능한 날짜 입력(예: 2월 31일)을 방지합니다.
<input type="date">는 사용자가 요일 정보, 인접한 날짜 등을 비교해 보면서 특정 날짜를 선택해야 할 때 유용합니다.
달력 형태의 인터페이스는 브라우저와 운영 체제에 따라 다르게 표시될 수 있습니다. 하지만, 기능은 동일합니다.
입력되는 날짜 형식은 어떻게 되나요?
YYYY-MM-DD
<input type="date">는 YYYY-MM-DD 형식으로 날짜를 입력하고 처리합니다.
이는 연도(Year), 월(Month), 일(Day)을 의미하며, 국제 표준 ISO 8601에 따라 날짜를 일관되게 표현합니다.
다음은 value 속성을 사용하여 기본값으로 표시할 날짜를 YYYY-MM-DD 형식으로 설정한 예시입니다.
위 예제에서 날짜는 "2024년 10월 17일"을 의미하며, 이 형식이 표준화되어 있어 지역에 상관없이 날짜를 동일하게 표현할 수 있습니다.
관련 속성 사용하기
| 속성 | 설명 |
|---|---|
value |
사용자가 아무런 입력을 하지 않을 때 처음 표시되는 날짜를 지정합니다. |
min |
사용자가 선택할 수 있는 가장 첫 번째 날짜를 지정합니다. |
max |
사용자가 선택할 수 있는 가장 마지막 날짜를 지정합니다. |
step |
사용자가 입력 가능한 날짜 간격을 지정합니다. |
value 속성
기본값을 설정합니다.
이 값은 사용자가 아무런 입력을 하지 않을 때 처음 표시되는 날짜를 지정합니다.
날짜는 YYYY-MM-DD 형식으로 입력해야 합니다.
min 속성
선택할 수 있는 허용 가능한 최소 날짜를 설정합니다.
이 값은 사용자가 선택할 수 있는 가장 첫 번째 날짜를 지정합니다.
날짜는 YYYY-MM-DD 형식으로 입력해야 합니다.
max 속성
선택할 수 있는 최대 날짜를 설정합니다.
이 값은 사용자가 선택할 수 있는 가장 마지막 날짜를 지정합니다.
날짜는 YYYY-MM-DD 형식으로 입력해야 합니다.
step 속성
사용자가 입력 가능한 날짜 간격을 지정합니다.
사용자가 정해진 간격에 따라 날짜를 선택하도록 제한할 수 있습니다. 지정하면 사용자는 간격에 맞는 날짜만 선택할 수 있습니다.
작동 방식
- 숫자 또는
any를 지정할 수 있습니다. - 기본값:
1(하루 간격으로 선택 가능) any: 날짜를 선택할 때 간격에 대한 제한이 없어집니다. 단순히step속성을 생략하는 것과 동일한 결과를 가져옵니다.any값을 사용하는 것보다는 코드의 간결성을 위해step속성을 생략하는 편이 좋습니다.
예제
다음은 2일 간격으로 날짜 선택하는 예제입니다.
이 밖에도 사용할 수 있는 관련 속성들이 다양하게 있습니다.
HTML <input> 태그의 여러 가지 속성들을 참조하세요!
접근성 고려사항
<input type="date">을 사용할 때에는 <label>을 함께 사용해야 합니다.
자세한 사항은 <input> 태그의 접근성 고려사항을 참조하세요.
브라우저 호환성
| 속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
<input type="date">
|
20 | 12 | 53 | 14.1 |
명세서
| 명세서 사양 | |
|---|---|
<input type="date">
|
HTML Standard #date-state-(type=date) |