容器
Calendar
一个月,画成一格一格的天。
什么时候用它
单独用来看范围或排期;放进 DatePicker 里用来选一天。
示例
default
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
说明
一个月份,画成一张日期网格。
包了 react-day-picker 而不是自己造一个日历,原因在长尾:月份网格很简单,围着它的一圈都不简单——键盘约定(方向键走一天,Page 走一个月,Home 和 End 到这一周的两端)、月份变化时的 aria-live 播报、周数、每个地区一周从周几开始不一样,以及“今天”和“选中”是读屏软件必须能听出区别的两种状态。
每个类名都是替换而不是叠加在库的样式表上,所以这里没有任何东西依赖一个本包管不到的 CSS 文件——但库自己的类名在每个插槽上都保留了下来,因为传类名是替换,而下游每一个 .rdp-* 选择器都依赖它们。
属性
同时接受 DayPickerProps 里的全部属性,它们会直接透传给底层元素,不再逐条列出。
键盘操作
| 按键 | 作用 |
|---|---|
| ←→ | 移动一天。 |
| ↑↓ | 移动一周。 |
| Page UpPage Down | 移动一个月。 |
| HomeEnd | 跳到本周的第一天或最后一天。 |
| EnterSpace | 选中当前聚焦的那一天。 |
无障碍
- 方向键走一天,Page 键走一个月,Home 和 End 到这一周的两端。
- “今天”是描边,“选中”是填充——一个是日历自身的事实,一个是读者做的选择,两者不能长得一样。
- 月份和年份用的是系统自己的 Select,不是平台的:一百年的原生列表是在滚动而不是在选择,而且样式由操作系统决定。
- 默认前后各十年。生日需要更宽的范围,用 startMonth 去要。