YearPicker
연도 묶음을 넘기며 연도를 선택.
- 라이브러리 전용
개요
미리보기
2016–2027
예시
상태
선택
2016–2027
This period can’t be scanned.범위 제한
2016–2027
This period can’t be scanned.
이렇게 · 이렇게 하지 않기
- 이렇게 선택 범위는 실제로 읽을 수 있는 기간으로 제한한다.
- 이렇게 하지 않기 범위 밖 연도는 숨기지 말고 비활성으로 두고 이유를 함께 보여준다.
- 이렇게 현재 연도는 글자로 표시한다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
label? | string | | 묶음의 접근 이름. 비우면 “연도 선택”. |
defaultValue? | string | 2026 | 비제어 초기 연도(YYYY). |
value? | string | | 제어 값(YYYY). null이면 선택 없음. |
min? | string | | 고를 수 있는 첫 해. 실제로 읽을 수 있는 기간으로 제한한다. |
max? | string | | 고를 수 있는 마지막 해. |
timeZone? | string | Asia/Seoul | “올해”를 정하는 시간대. |
onChange(value: string) | — | — | YYYY로 부른다. 쪽은 12년(예: 2016–2027). |
| 그 밖의 속성 | — | — | 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월” + 숨긴 연도).