时间选择字段

Alpha

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

View code

Birthday

––

功能特性

完整的键盘导航支持
支持受控与非受控模式
焦点管理完善
本地化支持
高度可组合性
默认支持无障碍访问

前言

该组件依赖于 @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 参考

Root

包含时间选择字段的所有部件

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`defaultPlaceholder`		`TimeValue` The default placeholder date
`defaultValue`		`TimeValue` The default value for the calendar
`dir`		`'ltr' \| 'rtl'` The reading direction of the time field when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`disabled`	`false`	`boolean` Whether or not the time field is disabled
`granularity`		`'hour' \| 'minute' \| 'second'` The granularity to use for formatting times. Defaults to minute if a Time is provided, otherwise defaults to minute. The field will render segments for each part of the date up to and including the specified granularity
`hideTimeZone`		`boolean` Whether or not to hide the time zone segment of the field
`hourCycle`		`12 \| 24` The hour cycle used for formatting times. Defaults to the local preference
`id`		`string` Id of the element
`locale`		`string` The locale to use for formatting dates
`maxValue`		`TimeValue` The maximum date that can be selected
`minValue`		`TimeValue` The minimum date that can be selected
`modelValue`		`TimeValue \| null` The controlled checked state of the field. Can be bound as `v-model`.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`placeholder`		`TimeValue` The placeholder date, which is used to determine what time to display when no time is selected. This updates as the user navigates the field
`readonly`	`false`	`boolean` Whether or not the time field is readonly
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`step`		`DateStep` The stepping interval for the time fields. Defaults to `1`.

Emit	Payload
`update:modelValue`	`[date: TimeValue]` Event handler called whenever the model value changes
`update:placeholder`	`[date: TimeValue]` Event handler called whenever the placeholder value changes

Slots (default)	Payload
`modelValue`	`TimeValue \| undefined` The current time of the field
`segments`	`{ part: SegmentPart; value: string; }[]` The time field segment contents
`isInvalid`	`boolean` Value if the input is invalid

Methods	Type
`setFocusedElement`	`(el: HTMLElement) => void` Helper to set the focused element inside the DateField

Data Attribute	Value
`[data-readonly]`	只读状态下存在
`[data-disabled]`	禁用状态下存在
`[data-invalid]`	无效状态下存在

Input

包含时间选择字段的各个段

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`part*`		`'day' \| 'month' \| 'year' \| 'hour' \| 'minute' \| 'second' \| 'dayPeriod' \| 'literal' \| 'timeZoneName'` The part of the date to render

Data Attribute	Value
`[data-disabled]`	禁用状态下存在
`[data-invalid]`	无效状态下存在
`[data-placeholder]`	未设置值时存在

无障碍访问

键盘交互

Key	Description
`Tab`	当焦点移动到时间选择字段时，聚焦于第一个段。
`ArrowLeftArrowRight`	在时间选择字段的各个段之间导航。
`ArrowUpArrowDown`	增加/更改当前段的值。
`0-9`	当焦点位于数字类型的 `TimeFieldInput` 上时，输入数字，并且如果下一个输入会导致无效值，则聚焦到下一个段。
`Backspace`	从当前聚焦的数字段中删除一位数字。
`AP`	当焦点位于时段（AM/PM）上时，将其设置为 AM 或 PM。

时间选择字段 ​

功能特性 ​

前言 ​

安装 ​

结构 ​

API 参考 ​

Root ​

Input ​

无障碍访问 ​

键盘交互 ​