kitseed.
组件

Time Picker 时间选择

精确输入和快捷选择共存,不让时间被隐式取整。

用于一天中的时分输入。TimePicker 支持 24 小时格式和半小时快捷列表,当前值不是半小时时仍会保留;时区、日期和调度规则由应用管理。

安装

pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/time-picker.json

首次使用请先完成 Registry 与主题接入。

输入与状态

08:15、8:15、0815 可以被规范化为 08:15。失焦或 Enter 时提交规范值;无效内容保留原文,交给表单约束提示。选择快捷项不会强行取整自由输入的时间。

Props

属性类型默认值说明
valuestring必填受控文本值
onValueChange(value: string) => void必填输入或选择更新
name / labelstring必填字段键和名称
disabled / requiredbooleanfalse原生字段状态
refRef<HTMLInputElement>—指向可见输入框
id / classNamestring—标识与样式
aria-invalid / aria-describedby原生 aria 属性—错误与说明关联

同时提供纯函数 normalizeTimeInput,父表单可在提交边界再次规范化。quickTimes 是快捷列表数据,展示快捷项不改变业务精度。

键盘与约束

输入框保持原生编辑;Enter 规范化当前值,不直接提交外层表单。关闭选择浮层后焦点回到输入框。使用 <Field compound> 提供标签和错误关联。

避免这样使用

不要把字符串当作带时区的时间戳;不要默默修正非法时间或自动四舍五入;不要仅因控件可输入就跳过后端调度验证。

来源与版本

0.1.0,来自 Subtic apps/web/components/ui/time-picker.tsx、apps/web/lib/time-picker.ts。保留时间解析,将产品调度语义留在应用。

查看由当前源码生成的类型参考

只展示 Kitseed 自身定义的属性,原生 HTML 与 Base UI 透传属性请参阅对应上游说明。

TimePicker

属性类型默认值
valuestring—
onValueChange(value: string) => void—
namestring—
labelstring—
disabled?booleanfalse
required?booleanfalse
ref?Ref<HTMLInputElement>—
id?string—
className?string—
"aria-invalid"?boolean—
"aria-describedby"?string—
components?{ Input?: typeof Input; SearchPicker?: typeof SearchPicker }—

本页内容