TimePicker 时间选择器
使用原生时间输入选择不带日期和时区的时分值。
使用概览
适合使用
- 营业时间、提醒时刻或日程时间需要单独录入时。
不建议使用
- 时间必须与具体日期、时区或持续时长共同表达时。
真实示例
会议开始时间
按十五分钟步长选择会议开始时刻。
安装
本地候选警告Registry 地址仅指向当前本地文档站;npm 包也只用于本地候选验证,尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/time-picker.json基础用法
导入
import { TimePicker } from "@richardqiu/quartz/time-picker";JSX
<TimePicker aria-label="开始时间" defaultValue="09:30" step={15} />状态与控制摘要
默认
键盘焦点可见
已禁用
无效
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
step | number | 1 | 以分钟为单位设置可选择时间的步长。 |
组合结构
- 01
TimePicker
键盘约定
- 原生时间控件提供平台键盘行为,并保留 minute step 约定。
可访问性契约
- 提供可见标签或 ARIA 标签。
- 值使用 HH:mm,且不隐含日期或时区。