MonthPicker
한 해의 월을 격자에서 골라 기록으로 이동.
- 라이브러리 전용
개요
미리보기
2026
예시
상태
선택
2026
This period can’t be scanned.범위 제한
2026
This period can’t be scanned.아직 읽지 않음
2026
This period can’t be scanned.Dashed outline: not scanned yet
이렇게 · 이렇게 하지 않기
- 이렇게 긴 기록 목록에서 특정 달로 이동할 때 쓴다.
- 이렇게 읽지 않은 달도 고를 수 있지만 “아직 읽지 않음”을 함께 표시한다.
- 이렇게 하지 않기 달마다 개수를 붙이지 않는다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
label? | string | | 묶음의 접근 이름. 비우면 “월 선택”. |
defaultValue? | string | 2026-10 | 비제어 초기 월(YYYY-MM). |
value? | string | | 제어 값(YYYY-MM). null이면 선택 없음. URL ?month=와 맞춘다. |
min? | string | | 고를 수 있는 첫 달(YYYY-MM). 그 전 달은 숨기지 않고 비활성 + 이유. |
max? | string | | 고를 수 있는 마지막 달(YYYY-MM). |
scannedFrom? | string | | 이 달(YYYY-MM) 전은 “아직 읽지 않음”(점선 + 글자). 고를 수는 있다. |
timeZone? | string | Asia/Seoul | “이번 달”을 정하는 시간대. |
onChange(value: string) | — | — | YYYY-MM으로 부른다. |
YearPicker | — | — | 같은 격자의 연도 모드다. |
| 그 밖의 속성 | — | — | id, aria-* 등 바깥 <div role="group">의 속성을 전달한다. |
접근성
키보드: 격자는 Tab 정지점 하나. ←→ 하나 · ↑↓ 한 줄(3칸) · Home/End 줄의 처음/끝 · PageUp/PageDown 이전/다음 쪽(12칸) · Enter·Space 선택.
- <table role="grid"> 4×3, 칸은 role="gridcell" + aria-selected, 현재 월·연은 aria-current="date"와 보이는 “이번 달/올해” 글자.
- 범위 밖은 숨기지 않고 aria-disabled + 취소선 + 이유 문장(aria-describedby “이 기간은 읽을 수 없어요.”).
- 이전/다음 쪽 버튼 뒤 새 제목(“2027년”, “2028년–2039년”)은 공용 announce()로 알린다. 칸 이름은 내용에서 나온다(보이는 “10월” + 숨긴 연도).