范围日历

Alpha

提供专为选择日期范围而设计的日历视图。

查看代码

事件日期，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

功能

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

前言

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

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

安装

安装日期包。

$ npm add @internationalized/date

从命令行安装此组件。

$ npm add reka-ui

结构

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

vue

<script setup>
import {
  RangeCalendarCell,
  RangeCalendarCellTrigger,
  RangeCalendarGrid,
  RangeCalendarGridBody,
  RangeCalendarGridHead,
  RangeCalendarGridRow,
  RangeCalendarHeadCell,
  RangeCalendarHeader,
  RangeCalendarHeading,
  RangeCalendarNext,
  RangeCalendarPrev,
  RangeCalendarRoot,
} from 'reka-ui'
</script>

<template>
  <RangeCalendarRoot>
    <RangeCalendarHeader>
      <RangeCalendarPrev />
      <RangeCalendarHeading />
      <RangeCalendarNext />
    </RangeCalendarHeader>
    <RangeCalendarGrid>
      <RangeCalendarGridHead>
        <RangeCalendarGridRow>
          <RangeCalendarHeadCell />
        </RangeCalendarGridRow>
      </RangeCalendarGridHead>
      <RangeCalendarGridBody>
        <RangeCalendarGridRow>
          <RangeCalendarCell>
            <RangeCalendarCellTrigger />
          </RangeCalendarCell>
        </RangeCalendarGridRow>
      </RangeCalendarGridBody>
    </RangeCalendarGrid>
  </RangeCalendarRoot>
</template>

API 参考

根

包含日历的所有部分

属性	默认	类型
`allowNonContiguousRanges`	`false`	`布尔值` 与`isDateUnavailable`结合使用时，确定是否可以选择非连续范围，即包含不可用日期的范围。
`as`	`'div'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`calendarLabel`		`string` 日历的可访问标签
`defaultPlaceholder`		`DateValue` 默认占位符日期
`defaultValue`	`{ start: undefined, end: undefined }`	`DateRange` 日历的默认值
`dir`		`'ltr' \| 'rtl'` 日历的阅读方向（如适用）。如果省略，则全局继承自 `ConfigProvider` 或假定为 LTR（从左到右）阅读模式。
`disabled`	`false`	`布尔值` 日历是否被禁用
`disableDaysOutsideCurrentView`	`false`	`布尔值` 是否禁用当前视图之外的日期。
`fixedDate`		`'start' \| 'end'` 范围的哪一部分应该被固定
`fixedWeeks`	`false`	`布尔值` 日历是否始终显示6周
`initialFocus`	`false`	`布尔值` 如果为真，日历在挂载时将根据可见内容聚焦选定的日期、今天或月份的第一天。
`isDateDisabled`		`Matcher` 一个函数，返回日期是否被禁用
`isDateHighlightable`		`Matcher` 一个函数，返回日期是否可高亮
`isDateUnavailable`		`Matcher` 一个函数，返回日期是否不可用
`locale`		`string` 用于日期格式化的区域设置
`maximumDays`		`数字` 在一个范围内可以选择的最大天数
`maxValue`		`DateValue` 可选择的最大日期
`minValue`		`DateValue` 可选择的最小日期
`modelValue`		`DateRange \| null` 日历的受控选中状态。可以绑定为`v-model`。
`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: DateRange]` 每当模型值改变时调用的事件处理程序
`update:placeholder`	`[date: DateValue]` 每当占位符值改变时调用的事件处理程序
`update:startValue`	`[date: DateValue]` 当起始值改变时调用的事件处理程序

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

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

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

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

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

上一页按钮

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

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

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

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

下一页按钮

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

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

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

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

标题

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

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

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

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

网格

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

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

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

网格头部

用于包裹网格头的容器。

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

网格主体

用于包裹网格体的容器。

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

网格行

用于包裹网格行的容器。

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

表头单元格

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

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

单元格

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

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

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

单元格触发器

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

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

插槽（默认）	载荷
`dayValue`	`string` 当前日期
`disabled`	`布尔值` 当前禁用状态
`selected`	`布尔值` 当前选中状态
`today`	`布尔值` 当前今日状态
`outsideView`	`布尔值` 当前视图外状态
`outsideVisibleView`	`布尔值` 当前可见视图外状态
`unavailable`	`布尔值` 当前不可用状态
`highlighted`	`布尔值` 当前高亮状态
`highlightedStart`	`布尔值` 当前高亮起始状态
`highlightedEnd`	`布尔值` 当前高亮结束状态
`selectionStart`	`布尔值` 当前选择起始状态
`selectionEnd`	`布尔值` 当前选择结束状态

数据属性	值
`[data-selected]`	选中时存在
`[data-value]`	日期的 ISO 字符串值。
`[data-disabled]`	禁用时存在
`[data-unavailable]`	不可用时存在
`[data-today]`	为今天时存在
`[data-outside-view]`	当日期不在显示月份范围内时存在。
`[data-outside-visible-view]`	当日期不在日历可见月份范围内时存在。
`[data-selection-start]`	当日期是选择的起始日期时出现。
`[data-selection-end]`	当日期是选择的结束日期时出现。
`[data-highlighted]`	当用户选择范围时高亮显示日期时出现。
`[data-highlighted-start]`	当日期是用户高亮范围的起始日期时出现。
`[data-highlighted-end]`	当日期是用户高亮范围的结束日期时出现。
`[data-focused]`	聚焦时存在

可访问性

键盘交互

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

周六	周一	周二	周三	周二	周五	周六
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

范围日历 ​

功能 ​

前言 ​

安装 ​

结构 ​

API 参考 ​

根 ​

头部 ​

上一页按钮 ​

下一页按钮 ​

标题 ​

网格 ​

网格头部 ​

网格主体 ​

网格行 ​

表头单元格 ​

单元格 ​

单元格触发器 ​

可访问性 ​

键盘交互 ​