日期范围字段

Alpha

允许用户在指定字段中输入日期范围。

查看代码

预订

月

日

年

月

日

年

功能

完整的键盘导航
可受控或非受控
焦点完全受控
本地化支持
高度可组合
默认可访问
支持日期和日期时间格式

前言

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

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

安装

安装日期包。

$ npm add @internationalized/date

从命令行安装此组件。

$ npm add reka-ui

结构

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

vue

<script setup>
import {
  DateRangeFieldInput,
  DateRangeFieldRoot,
} from 'reka-ui'
</script>

<template>
  <DateRangeFieldRoot>
    <DateRangeFieldInput />
  </DateRangeFieldRoot>
</template>

API 参考

根组件

包含日期字段的所有部分

属性	默认	类型
`as`	`'div'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`defaultPlaceholder`		`DateValue` 默认占位符日期
`defaultValue`		`DateRange` 日历的默认值
`dir`		`'ltr' \| 'rtl'` 日期字段适用的阅读方向。如果省略，则全局继承自 `ConfigProvider` 或假定为 LTR（从左到右）阅读模式。
`disabled`	`false`	`布尔值` 日期字段是否被禁用
`granularity`		`'day' \| 'hour' \| 'minute' \| 'second'` 用于格式化时间的粒度。如果提供了 CalendarDate，则默认为“天”，否则默认为“分钟”。字段将呈现日期中每个部分的片段，直到并包括指定的粒度
`hideTimeZone`		`布尔值` 是否隐藏字段的时区部分
`hourCycle`		`12 \| 24` 用于格式化时间的小时制。默认为本地偏好设置
`id`		`string` 元素的 ID
`isDateUnavailable`		`Matcher` 一个函数，返回日期是否不可用
`locale`		`string` 用于日期格式化的区域设置
`maxValue`		`DateValue` 可选择的最大日期
`minValue`		`DateValue` 可选择的最小日期
`modelValue`		`DateRange \| null` 日历的受控选中状态。可以绑定为`v-model`。
`name`		`string` 字段的名称。随其所属的表单一起作为名称/值对提交。
`placeholder`		`DateValue` 占位符日期，用于在未选择日期时确定要显示的月份。此值会随着用户导航日历而更新，可用于编程方式控制日历视图。
`readonly`	`false`	`布尔值` 日期字段是否只读
`required`		`布尔值` 当为 `true` 时，表示用户必须在所属表单提交前设置值。
`step`		`DateStep` 时间字段的步进间隔。默认为 `1`。

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

插槽（默认）	载荷
`modelValue`	`DateRange \| null`
`segments`	`{ start: { part: SegmentPart; value: string; }[]; end: { part: SegmentPart; value: string; }[]; }`

方法	类型
`isDateUnavailable`	`Matcher` 一个函数，返回日期是否不可用
`setFocusedElement`	`(el: HTMLElement) => void`

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

Input

包含日期字段的片段

属性	默认	类型
`as`	`'div'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`part*`		`'day' \| 'month' \| 'year' \| 'hour' \| 'minute' \| 'second' \| 'dayPeriod' \| 'literal' \| 'timeZoneName'` 要渲染的日期部分
`type*`		`'start' \| 'end'` 要渲染的字段类型（开始或结束）

数据属性	值
`[data-disabled]`	禁用时存在
`[data-invalid]`	无效时存在
`[data-placeholder]`	未设置值时存在

可访问性

键盘交互

键	描述
`Tab`	当焦点移到日期字段时，聚焦第一个片段。
`向左箭头向右箭头`	在日期字段片段之间导航。
`向上箭头向下箭头`	增加/更改片段的值。
`0-9`	当焦点在数字 DateFieldInput 上时，它会输入数字，如果下一个输入会导致无效值，则会将焦点移至下一个片段。
`Backspace`	从聚焦的数字片段中删除一位数字。
`AP`	当焦点位于日期时段时，将其设置为上午 (AM) 或下午 (PM)。

日期范围字段 ​

功能 ​

前言 ​

安装 ​

结构 ​

API 参考 ​

根组件 ​

Input ​

可访问性 ​

键盘交互 ​

日期范围字段

功能

前言

安装

结构

API 参考

根组件

Input

可访问性

键盘交互