03 · Components · 입력
날짜 선택Date Picker
날짜 하나 또는 기간을 선택. 네이티브 input[type=date]를 기반으로 OS 접근성을 상속합니다.
StableWCAG AA
기본
tsx
<DatePicker value={value} onChange={(e) => setValue(e.target.value)} />미리보기
기간 선택
시작일·종료일을 두 개의 필드로 노출하고 서로의 min/max를 걸어 역전을 방지합니다. 단일 팝오버 캘린더보다 키보드 접근성이 좋습니다.
tsx
<DatePicker value={start} max={end} onChange={(e) => setStart(e.target.value)} />
<DatePicker value={end} min={start} onChange={(e) => setEnd(e.target.value)} />미리보기
네이티브 input[type=date]는 OS·브라우저가 제공하는 캘린더 팝오버와 스크린리더 레이블을 그대로 사용합니다. 커스텀 캘린더보다 학습비용이 낮고 접근성이 안정적입니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | 높이 32 / 40 / 48px. |
min / max | string (YYYY-MM-DD) | 선택 가능한 범위 제한. | |
invalid | boolean | 오류 테두리 + aria-invalid. |