UI
本页目录

组件 · 数据录入

TimePicker 时间选择

提供文本输入与点击图标打开的时间列。

入口 @selrux/ui/time-picker · 源码 src/components/time-picker/index.ts · 2 个组件

引入

tsx
import { TimePicker, TimeRangePicker } from '@selrux/ui/time-picker';

演练场

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

可切换 HH、HH:mm、HH:mm:ss 格式并手动输入；下方范围示例可检查两端图标、聚焦颜色及终点禁用状态。

代码演示

基础选择

手动输入 HH:mm，或点击图标打开时间列。

仅小时

格式为 HH，手输和弹层都只显示小时。

精确到秒

格式为 HH:mm:ss，连续展示时、分、秒。

手动输入

只接受数字，字段越界即时归入上限；完整时间仍需通过禁用规则。

依次输入 09、30、15；时超过 23 自动变为 23，分秒超过 59 自动变为 59。失焦或按 Enter 提交，Esc 撤销。当前值：未选择

时间范围

两端各有时钟图标；先选择开始时间，结束时间在此之前禁用。

双图标入口

分别聚焦起止字段，观察图标从边框色变为品牌色；两端打开同一弹层。

两侧图标均可打开时间范围；聚焦对应字段时，该图标才使用品牌色。

秒级范围

两端遵循相同的连续字段格式。

受控时间

外部快捷按钮与输入框、弹层共用一个值。

受控范围

外部预设可写入完整起止时间。

时间约束

手输与弹层均禁止提交 12 点，数字字段上限仍即时生效。

可手输 11:30；手输 12:30 会标为无效且不会改变选中值，弹层中的 12 点也置灰。

范围约束

起止时间都在营业区间内，午休时间及早于起点的终点置灰。

禁用状态

切换后两个输入框与弹层按钮同时失效。

API

属性覆盖：示例用到 22 / 22 个自有属性（100%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

TimePicker

提供文本输入与点击图标打开的时间列。

属性说明类型默认值
onChange合法时间或清空后的回调。((value: TimeValue | null) => void)-
placeholder空值提示，省略时显示当前格式。string-
disabled禁用输入与弹层。boolean-
aria-label输入框的可访问名称，默认“选择时间”。string-
className外层附加 class。string-
defaultValue非受控初始值。TimeValue-
value受控值；null 表示空值。TimeValue | null-
format连续字段格式，默认 HH:mm。"HH" | "HH:mm" | "HH:mm:ss"-
minTime最早可选时间，包含边界。TimeValue-
maxTime最晚可选时间，包含边界。TimeValue-
isTimeDisabled自定义禁用判定，作用于手输与弹层选择。((value: TimeValue) => boolean)-

TimeRangePicker

开始与结束字段各有图标入口，面板并排；终点在起点确定前保持禁用。

属性说明类型默认值
onChange起点或终点变更后的回调。((value: TimeRange | null) => void)-
startLabel起点输入的可访问名称，默认“开始时间”。string-
endLabel终点输入的可访问名称，默认“结束时间”。string-
startPlaceholder起点空值提示，省略时显示当前格式。string-
endPlaceholder终点空值提示，省略时显示当前格式。string-
disabled禁用两个输入与弹层。boolean-
className外层附加 class。string-
defaultValue非受控初始范围。TimeRange-
value受控范围，null 表示空值。TimeRange | null-
format连续字段格式，默认 HH:mm。"HH" | "HH:mm" | "HH:mm:ss"-
minTime最早可选时间，包含边界。TimeValue-
maxTime最晚可选时间，包含边界。TimeValue-
isTimeDisabled自定义禁用判定，作用于手输与弹层选择。((value: TimeValue) => boolean)-

导出类型：TimeFormat、TimePickerProps、TimeRange、TimeRangePickerProps、TimeValue

无障碍

摘自源码 JSDoc。

  • TimePicker.aria-label：输入框的可访问名称，默认“选择时间”。
  • TimeRangePicker.startLabel：起点输入的可访问名称，默认“开始时间”。
  • TimeRangePicker.endLabel：终点输入的可访问名称，默认“结束时间”。