DateRangePicker
시작·끝 날짜로 기간 선택. 30·90일 프리셋.
- 라이브러리 전용
개요
미리보기
예시
상태
지난 30일
지난 90일
비어 있음
시작만
기간
범위 초과
열림
Choose a start date.
October 2026
Sun Mon Tue Wed Thu Fri Sat 비활성
이렇게 · 이렇게 하지 않기
- 이렇게 가져올 기간을 넓힐 때처럼 범위가 필요한 곳에 쓴다.
- 이렇게 고른 기간이 무엇을 바꾸는지 버튼 위에 한 줄로 쓴다(“지난 90일을 읽어요”).
- 이렇게 하지 않기 접근할 수 없는 과거를 고를 수 있는 것처럼 보이게 하지 않는다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
label | ReactNode | 가져올 기간 | 항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다. |
hint? | ReactNode | | 상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음. |
error? | ReactNode | | 오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다. |
required? | boolean | false | required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음). |
disabled? | boolean | false | Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다. |
defaultPreset? | 'custom' | '30' | '90' | custom | 처음 프리셋. 30·90은 오늘까지 지난 n일, custom은 defaultStart–defaultEnd. |
defaultStart? | string | | 비제어 시작일(YYYY-MM-DD). |
defaultEnd? | string | | 비제어 종료일(YYYY-MM-DD). |
min? | string | | 고를 수 있는 가장 이른 날짜. 실제로 읽을 수 있는 가장 이른 날로 둔다. |
max? | string | | 고를 수 있는 가장 늦은 날짜(YYYY-MM-DD). |
maxDays? | number | — | 최대 기간(일, 양 끝 포함). 넘으면 고르지 않고 이유를 보인다. |
open? | boolean | false | 처음부터 달력을 연다(카탈로그·테스트). 초점은 옮기지 않는다. |
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의 실제 날짜. |
onRangeChange({ start, end, preset }) | — | — | 프리셋·입력·달력 모두 이 하나로 알린다. 날짜는 YYYY-MM-DD. |
@320 | — | — | 640px 미만에서는 1개월 패널. |
| 그 밖의 속성 | — | — | id, aria-* 등은 바깥 <div>로 간다. |
접근성
키보드: 격자에서 첫 Enter = 시작, 두 번째 Enter = 끝(앞이면 서로 바꾼다). 범위 미리보기는 초점을 따른다. Esc = 시작만 골랐으면 취소, 다시 Esc = 닫기. 끝을 고르면 닫고 달력 버튼으로. 격자는 Tab 정지점 하나. ←→ 하루 · ↑↓ 한 주 · Home/End 주의 처음/끝 · PageUp/PageDown 이전/다음 달 · Shift+PageUp/PageDown 이전/다음 해 · Enter·Space 선택. 월·연 제목 버튼은 월/연 격자로 바꾸고 Esc로 돌아온다.
- 범위 안 날짜 칸의 이름에 “시작일/종료일/선택 범위 안”이 붙는다. 띠는 색 외에 시작·끝 채운 원으로도 보인다.
- 시작을 고르면 “시작 3월 4일. 끝 날짜를 고르세요.”를 공용 announce()로 한 번 알리고(polite), 같은 문장이 대화상자 위에 보이며 격자의 aria-describedby다. 최대 기간 초과도 같은 방식.
- aria-describedby 순서는 도움말 → 오류. 오류가 있으면 aria-invalid="true".