DatePicker
달력에서 월과 날짜를 선택.
- 라이브러리 전용
개요
미리보기
Switch to month listSwitch to year list
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
예시
상태
선택
Switch to month listSwitch to year listSun Mon Tue Wed Thu Fri Sat 선택 없음
Switch to month listSwitch to year listSun Mon Tue Wed Thu Fri Sat 범위 제한
Switch to month listSwitch to year listSun Mon Tue Wed Thu Fri Sat 앞뒤 달 숨김
Switch to month listSwitch to year listSun Mon Tue Wed Thu Fri Sat 월요일 시작
Switch to month listSwitch to year listMon Tue Wed Thu Fri Sat Sun 작게(MiniCalendar)
Switch to month listSwitch to year listSun Mon Tue Wed Thu Fri Sat
쓰임 예
다른 달
Switch to month listSwitch to year listSun Mon Tue Wed Thu Fri Sat
이렇게 · 이렇게 하지 않기
- 이렇게 날짜를 눈으로 고르는 편이 빠를 때 쓴다.
- 이렇게 오늘은 글자와 테두리로 표시한다.
- 이렇게 하지 않기 기록이 있는 날을 진하기로 구분하지 않는다.
- 이렇게 하지 않기 공휴일 지역을 KR로 가정하지 않는다. 사용자 지역의 공휴일만 넘긴다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
label? | string | | 달력 묶음의 접근 이름(시각적으로 숨김). 비우면 “날짜 선택”. |
defaultValue? | string | 2026-10-19 | 비제어 초기 날짜(YYYY-MM-DD). 비우면 선택 없음. |
value? | string | | 제어 값. null이면 “제어 중이고 선택 없음”, 비우면 비제어. onChange와 함께 쓴다. |
min? | string | | 고를 수 있는 가장 이른 날짜(YYYY-MM-DD). 그 전 날짜는 초점은 받지만 aria-disabled. |
max? | string | | 고를 수 있는 가장 늦은 날짜(YYYY-MM-DD). |
size? | 'regular' | 'compact' | regular | compact는 MiniCalendar 크기(작은 글자·여백). 날짜 칸 44px와 “오늘” 버튼은 그대로. |
showOutsideDays? | boolean | true | 앞뒤 달의 날짜도 보이고 고를 수 있다. |
weekStart? | 'locale' | 'monday' | 'sunday' | locale | locale은 CLDR 주 시작(ko·en 일요일, zh·es 월요일). 서버와 브라우저가 같은 결과를 내도록 고정 표를 쓴다. |
timeZone? | string | Asia/Seoul | “오늘”을 정하는 IANA 시간대. 기본 Asia/Seoul. |
today? | string | 2026-10-19 | 고정된 “오늘”(YYYY-MM-DD). 테스트·카탈로그용. 비우면 timeZone의 실제 날짜. |
holidays? | { date: string; name: string }[] | — | 사용자 지역의 공휴일. 기본은 없음(KR을 강제하지 않는다). 이름은 날짜의 접근 이름과 달력 아래 목록에 들어간다. |
markedDates? | string[] | — | 기록이 있는 날(YYYY-MM-DD). 점 하나와 “기록 있음”만 붙는다. 개수나 밀도는 그리지 않는다. |
onChange(value: string) | — | — | 날짜를 고르면 YYYY-MM-DD로 부른다. 시간대 없는 날짜다. |
ref | — | — | ref는 바깥 <div role="group">으로 전달된다. |
| 그 밖의 속성 | — | — | id, aria-* 등 바깥 <div role="group">의 속성을 전달한다. |
접근성
키보드: 격자는 Tab 정지점 하나. ←→ 하루 · ↑↓ 한 주 · Home/End 주의 처음/끝 · PageUp/PageDown 이전/다음 달 · Shift+PageUp/PageDown 이전/다음 해 · Enter·Space 선택. 월·연 제목 버튼은 월/연 격자로 바꾸고 Esc로 돌아온다.
- <table role="grid">, 요일 <th scope="col" abbr="월요일">, 날짜 칸 role="gridcell" + aria-selected. 버튼 이름은 내용에서 나온다: 숨긴 “2026년 10월 ” + 보이는 “3” + 숨긴 “일 토요일, 개천절”(2.5.3 보이는 글자가 이름 안에). 오늘은 aria-current="date".
- 날짜 칸은 어느 폭에서나 44×44(7×44 = 308). 320 화면에서는 페이지 여백을 좌우 10px까지 써서 가로 스크롤 없이 들어간다. 선택은 채운 원 + 굵기, 오늘은 테두리 + 굵기 + “오늘” 텍스트 버튼(작은 크기에도), 범위 밖은 취소선.
- 이전/다음 달 버튼은 초점이 버튼에 남으므로 새 달(“2026년 11월”)을 공용 announce()로 한 번 알린다. 키보드로 달을 넘기면 알리지 않는다(초점이 간 날짜 이름에 달이 들어 있다, README §9-6).