时间字段

Alpha版

允许用户在指定字段内输入具体时间。

查看代码

生日

––

上午

功能特性

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

前言

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

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

安装

安装日期包。

$ npm add @internationalized/date

从命令行安装此组件。

$ npm add reka-ui

结构解析

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

vue

<script setup>
import {
  TimeFieldInput,
  TimeFieldRoot,
} from 'reka-ui'
</script>

<template>
  <TimeFieldRoot>
    <TimeFieldInput />
  </TimeFieldRoot>
</template>

API 参考

根组件

包含时间字段的所有部分

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

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

插槽（默认）	载荷
`modelValue`	`TimeValue \| undefined` 字段的当前时间
`segments`	`{ part: SegmentPart; value: string; }[]` 时间字段片段内容
`isInvalid`	`布尔值` 如果输入无效，则为该值

方法	类型
`setFocusedElement`	`(el: HTMLElement) => void` 用于设置 DateField 内部焦点元素的辅助函数

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

输入

包含时间字段片段

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

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

可访问性

键盘交互

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

时间字段 ​

功能特性 ​

前言 ​

安装 ​

结构解析 ​

API 参考 ​

根组件 ​

输入 ​

可访问性 ​

键盘交互 ​