组件
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
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | string | 必填 | 受控文本值 |
onValueChange | (value: string) => void | 必填 | 输入或选择更新 |
name / label | string | 必填 | 字段键和名称 |
disabled / required | boolean | false | 原生字段状态 |
ref | Ref<HTMLInputElement> | — | 指向可见输入框 |
id / className | string | — | 标识与样式 |
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
| 属性 | 类型 | 默认值 |
|---|---|---|
value | string | — |
onValueChange | (value: string) => void | — |
name | string | — |
label | string | — |
disabled? | boolean | false |
required? | boolean | false |
ref? | Ref<HTMLInputElement> | — |
id? | string | — |
className? | string | — |
"aria-invalid"? | boolean | — |
"aria-describedby"? | string | — |
components? | { Input?: typeof Input; SearchPicker?: typeof SearchPicker } | — |