日历

Alpha

显示日期和星期几，方便进行日期相关的交互。

查看代码

2024年10月

周六	周一	周二	周三	周二	周五	周六
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9

事件日期，2024年10月

功能特性

完整的键盘导航
可受控或非受控
焦点完全受管理
本地化支持
高度可组合

前言

该组件依赖于 @internationalized/date 包，该包解决了在 JavaScript 中处理日期和时间时出现的许多问题。

我们强烈建议您阅读该包的文档，以便充分了解其工作原理，并且您需要将其安装到您的项目中才能使用日期相关组件。

安装

安装日期包。

$ npm add @internationalized/date

从命令行安装此组件。

$ npm add reka-ui

结构

导入所有部分并将其组合。

vue

<script setup>
import {
  CalendarCell,
  CalendarCellTrigger,
  CalendarGrid,
  CalendarGridBody,
  CalendarGridHead,
  CalendarGridRow,
  CalendarHeadCell,
  CalendarHeader,
  CalendarHeading,
  CalendarNext,
  CalendarPrev,
  CalendarRoot,
} from 'reka-ui'
</script>

<template>
  <CalendarRoot>
    <CalendarHeader>
      <CalendarPrev />
      <CalendarHeading />
      <CalendarNext />
    </CalendarHeader>
    <CalendarGrid>
      <CalendarGridHead>
        <CalendarGridRow>
          <CalendarHeadCell />
        </CalendarGridRow>
      </CalendarGridHead>
      <CalendarGridBody>
        <CalendarGridRow>
          <CalendarCell>
            <CalendarCellTrigger />
          </CalendarCell>
        </CalendarGridRow>
      </CalendarGridBody>
    </CalendarGrid>
  </CalendarRoot>
</template>

API 参考

根

包含日历的所有部分

属性	默认	类型
`as`	`'div'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`calendarLabel`		`string` 日历的可访问标签
`defaultPlaceholder`		`DateValue` 默认占位符日期
`defaultValue`		`DateValue` 日历的默认值
`dir`		`'ltr' \| 'rtl'` 日历的阅读方向（如适用）。如果省略，则全局继承自 `ConfigProvider` 或假定为 LTR（从左到右）阅读模式。
`disabled`	`false`	`布尔值` 日历是否被禁用
`disableDaysOutsideCurrentView`	`false`	`布尔值` 是否禁用当前视图之外的日期。
`fixedWeeks`	`false`	`布尔值` 日历是否始终显示6周
`initialFocus`	`false`	`布尔值` 如果为 true，日历在挂载时将根据可见内容，聚焦到选定日期、今天或该月的第一天。
`isDateDisabled`		`Matcher` 一个函数，返回日期是否被禁用
`isDateUnavailable`		`Matcher` 一个函数，返回日期是否不可用
`locale`		`string` 用于日期格式化的区域设置
`maxValue`		`DateValue` 可选择的最大日期
`minValue`		`DateValue` 可选择的最小日期
`modelValue`		`DateValue \| DateValue[]` 日历的受控选中状态
`multiple`	`false`	`布尔值` 是否可以选择多个日期
`nextPage`		`((placeholder: DateValue) => DateValue)` 一个函数，返回日历的下一页。它在组件内部接收当前占位符作为参数。
`numberOfMonths`	`1`	`数字` 一次性显示的月份数量
`pagedNavigation`	`false`	`布尔值` 此属性使上一页和下一页按钮以一次显示的月份数量进行导航，而非按月导航
`placeholder`		`DateValue` 占位符日期，用于在未选择日期时确定要显示的月份
`preventDeselect`	`false`	`布尔值` 是否阻止用户在未选择其他日期的情况下取消选择日期
`prevPage`		`((placeholder: DateValue) => DateValue)` 一个函数，返回日历的上一页。它在组件内部接收当前占位符作为参数。
`readonly`	`false`	`布尔值` 日历是否为只读
`weekdayFormat`	`'narrow'`	`'narrow' \| 'short' \| 'long'` 通过 `weekdays` 插槽属性提供的星期字符串的格式
`weekStartsOn`	`0`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` 日历开始的星期几

事件触发	载荷
`update:modelValue`	`[date: DateValue]` 每当模型值改变时调用的事件处理程序
`update:placeholder`	`[date: DateValue]` 每当占位符值改变时调用的事件处理程序

插槽（默认）	载荷
`date`	`DateValue` 占位符的当前日期
`grid`	`Grid<DateValue>[]` 日期网格
`weekDays`	`string[]` 星期几
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` 一周的开始
`locale`	`string` 日历区域设置
`fixedWeeks`	`布尔值` 日历是否始终显示6周
`modelValue`	`DateValue \| DateValue[] \| undefined` 日历的当前日期

方法	类型
`isDateDisabled`	`Matcher` 一个函数，返回日期是否被禁用
`isDateUnavailable`	`Matcher` 一个函数，返回日期是否不可用

数据属性	值
`[data-readonly]`	只读时存在
`[data-disabled]`	禁用时存在
`[data-invalid]`	无效时存在

包含导航按钮和标题部分。

属性	默认	类型
`as`	`'div'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。

上一个按钮

日历导航按钮。它根据当前日历视图，将日历向前导航一个月/年/十年。

属性	默认	类型
`as`	`'button'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`prevPage`		`((placeholder: DateValue) => DateValue)` 用于上一页的函数。它会覆盖在 `CalendarRoot` 上设置的 `prevPage` 函数。

插槽（默认）	载荷
`disabled`	`布尔值` 当前禁用状态

数据属性	值
`[data-disabled]`	禁用时存在

下一个按钮

日历导航按钮。它根据当前日历视图，将日历导航到未来一个月/年/十年。

属性	默认	类型
`as`	`'button'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`nextPage`		`((placeholder: DateValue) => DateValue)` 用于下一页的函数。它会覆盖在 `CalendarRoot` 上设置的 `nextPage` 函数。

插槽（默认）	载荷
`disabled`	`布尔值` 当前禁用状态

数据属性	值
`[data-disabled]`	禁用时存在

标题

显示当前月份和年份的标题

属性	默认	类型
`as`	`'div'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。

插槽（默认）	载荷
`headingValue`	`string` 当前月份和年份

数据属性	值
`[data-disabled]`	禁用时存在

网格

用于包裹日历网格的容器。

属性	默认	类型
`as`	`'table'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。

数据属性	值
`[data-readonly]`	只读时存在
`[data-disabled]`	禁用时存在

网格头

用于包裹网格头的容器。

属性	默认	类型
`as`	`'thead'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。

网格体

用于包裹网格体的容器。

属性	默认	类型
`as`	`'tbody'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。

网格行

用于包裹网格行的容器。

属性	默认	类型
`as`	`'tr'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。

表头单元格

用于包裹表头单元格的容器。用于显示星期几。

属性	默认	类型
`as`	`'th'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。

单元格

用于包裹日历单元格的容器。

属性	默认	类型
`as`	`'td'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`date*`		`DateValue` 单元格的日期值

数据属性	值
`[data-disabled]`	禁用时存在

单元格触发器

用于显示单元格日期的可交互容器。点击可选择日期。

属性	默认	类型
`as`	`'div'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`day*`		`DateValue` 提供给单元格触发器的日期值
`month*`		`DateValue` 单元格渲染所在的月份

插槽（默认）	载荷
`dayValue`	`string` 当前日期
`disabled`	`布尔值` 当前禁用状态
`selected`	`布尔值` 当前选中状态
`today`	`布尔值` 当前今日状态
`outsideView`	`布尔值` 当前视图外状态
`outsideVisibleView`	`布尔值` 当前可见视图外状态
`unavailable`	`布尔值` 当前不可用状态

数据属性	值
`[data-selected]`	选中时存在
`[data-value]`	日期的 ISO 字符串值。
`[data-disabled]`	禁用时存在
`[data-unavailable]`	不可用时存在
`[data-today]`	为今天时存在
`[data-outside-view]`	当日期不在显示月份范围内时存在。
`[data-outside-visible-view]`	当日期不在日历可见月份范围内时存在。
`[data-focused]`	聚焦时存在

示例

可年份递增的日历

此示例展示了一个允许年份递增的日历。

查看代码

2025年7月

周六	周一	周二	周三	周二	周五	周六
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9

事件日期，2025年7月

支持区域设置和日历系统选择的日历

此示例展示了一些可用的区域设置以及日历系统的显示方式。

查看代码

区域设置日历

2025年7月

周六	周一	周二	周三	周二	周五	周六
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9

事件日期，2025年7月

此组件演示了使用基于触摸的滑动手势进行直观的日历导航，这是一种用户友好的月份浏览方式。

查看代码

2023年1月

周六	周一	周二	周三	周二	周五	周六
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31	1	2	3	4
5	6	7	8	9	10	11

事件日期，2023年1月

日历周数

此示例展示了如何使用 `CalendarWeek` 组件来显示周数。

查看代码

2025年7月

周	周六	周一	周二	周三	周二	周五
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9

事件日期，2025年7月

可访问性

键盘交互

键	描述
`Tab`	当焦点移到日历上时，聚焦到第一个导航按钮。
`空格键`	当焦点位于 `CalendarNext` 或 `CalendarPrev` 时，它会导航日历。否则，它会选择日期。
`回车键`	当焦点位于 `CalendarNext` 或 `CalendarPrev` 时，它会导航日历。否则，它会选择日期。
`ArrowLeftArrowRightArrowUpArrowDown`	当焦点位于 `CalendarCellTrigger` 时，它会导航日期，并在必要时更改月份/年份/十年。

日历

功能特性

前言

安装

结构

API 参考

根

头部

上一个按钮

下一个按钮

标题

网格

网格头

网格体

网格行

表头单元格

单元格

单元格触发器

示例

可年份递增的日历

支持区域设置和日历系统选择的日历

日历滑动手势导航

日历周数

可访问性

键盘交互

周六	周一	周二	周三	周二	周五	周六
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9

周六	周一	周二	周三	周二	周五	周六
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9

周六	周一	周二	周三	周二	周五	周六
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9

周六	周一	周二	周三	周二	周五	周六
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31	1	2	3	4
5	6	7	8	9	10	11

周	周六	周一	周二	周三	周二	周五
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9

周六	周一	周二	周三	周二	周五	周六
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9

周六	周一	周二	周三	周二	周五	周六
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9

周六	周一	周二	周三	周二	周五	周六
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9

周六	周一	周二	周三	周二	周五	周六
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31	1	2	3	4
5	6	7	8	9	10	11

周	周六	周一	周二	周三	周二	周五
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9

日历 ​

功能特性 ​

前言 ​

安装 ​

结构 ​

API 参考 ​

根 ​

头部 ​

上一个按钮 ​

下一个按钮 ​

标题 ​

网格 ​

网格头 ​

网格体 ​

网格行 ​

表头单元格 ​

单元格 ​

单元格触发器 ​

示例 ​

可年份递增的日历 ​

支持区域设置和日历系统选择的日历 ​

日历滑动手势导航 ​

日历周数 ​

可访问性 ​

键盘交互 ​

日历

功能特性

前言

安装

结构

API 参考

根

头部

上一个按钮

下一个按钮

标题

网格

网格头

网格体

网格行

表头单元格

单元格

单元格触发器

示例

可年份递增的日历

支持区域设置和日历系统选择的日历

日历滑动手势导航

日历周数

可访问性

键盘交互

周六	周一	周二	周三	周二	周五	周六
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9

周六	周一	周二	周三	周二	周五	周六
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9

周六	周一	周二	周三	周二	周五	周六
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9

周六	周一	周二	周三	周二	周五	周六
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31	1	2	3	4
5	6	7	8	9	10	11

周	周六	周一	周二	周三	周二	周五
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9