时间选择器TimePicker
填写与选择在规定范围内选择具体时间
先知道
时间选择器让用户选择小时和分钟，必要时也可以包含秒。界面要说明使用 12 小时制还是 24 小时制、每次跨几分钟，以及哪些时间不能选择。
14:30
131415
:
003045
什么时候用
- 会议 / 日程的开始时间14:30
- 营业时间等时间段：开始 + 结束一对营业时间09:00→18:00
- 定时任务：每天几点自动执行每天09:00自动同步数据
- 按固定步长选：每 30 分钟一档，避免奇葩时刻每 30 分钟一档，不会选出 09:17
什么时候不用
- 还需要选日期 → 用 日期选择器 DatePicker 的日期时间模式14:30只选了时间，到底哪一天？
- 只要上午 / 下午这种粗粒度 → 用 选择器 Select选「上午」而已，分钟级面板太重
- 让用户手输「下午三点」：解析靠猜，十赌九输时间下午三点解析失败：请输入 HH:mm
- 跨时区场景不标时区：你的 14:30 不是我的 14:3014:30北京时间还是伦敦时间？跨时区没标时区
组成结构 · Anatomy
14:30131415
1触发框Trigger显示已选时间
2时间列Time Column小时、分钟各一列，可滚动
3时间项Time Option一个可选的时刻
4选中项Selected当前时间，居中高亮
常见变体 · Variants
24 小时制24-hour
131415
:003045
默认形态,会议、定时任务都够用
时间范围Range
09:00
→18:00
要选开始和结束的一对时间
12 小时制12-hour
010203
:3045
AMPM
面向习惯上午下午说法的用户
固定步长Step
09:0009:3010:0010:30
只给整点半点,避免奇葩时刻
典型使用场景
会议时间设置
新建会议
时间
14:30
今天 · 约 1 小时
131415
:
003045
门店营业时间
营业时间超出时间门店自动显示「休息中」09:00→21:30
午休时间该时段暂停接单12:00→13:30
定时推送
日报推送
每天 08:30 推送给 全体成员
下次推送：明天 08:30
闹钟提醒
07:30工作日 · 起床
09:00周末 · 晨跑
＋ 添加闹钟