跳到正文
GitHub

容器

Calendar

一个月,画成一格一格的天。

什么时候用它

单独用来看范围或排期;放进 DatePicker 里用来选一天。

示例

default

September 2026

说明

一个月份,画成一张日期网格。

包了 react-day-picker 而不是自己造一个日历,原因在长尾:月份网格很简单,围着它的一圈都不简单——键盘约定(方向键走一天,Page 走一个月,Home 和 End 到这一周的两端)、月份变化时的 aria-live 播报、周数、每个地区一周从周几开始不一样,以及“今天”和“选中”是读屏软件必须能听出区别的两种状态。

每个类名都是替换而不是叠加在库的样式表上,所以这里没有任何东西依赖一个本包管不到的 CSS 文件——但库自己的类名在每个插槽上都保留了下来,因为传类名是替换,而下游每一个 .rdp-* 选择器都依赖它们。

属性

同时接受 DayPickerProps 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

键盘操作

Calendar keyboard interactions
按键作用
移动一天。
移动一周。
Page UpPage Down移动一个月。
HomeEnd跳到本周的第一天或最后一天。
EnterSpace选中当前聚焦的那一天。

无障碍

  • 方向键走一天,Page 键走一个月,Home 和 End 到这一周的两端。
  • “今天”是描边,“选中”是填充——一个是日历自身的事实,一个是读者做的选择,两者不能长得一样。
  • 月份和年份用的是系统自己的 Select,不是平台的:一百年的原生列表是在滚动而不是在选择,而且样式由操作系统决定。
  • 默认前后各十年。生日需要更宽的范围,用 startMonth 去要。