时间选择器Time Picker
你可能会说
让用户选几点几分，别让他自己打字。
时间选择器是让用户从允许范围中选择具体时刻的表单控件预约会议可选择 09:30 这类时间。应明确 12 小时制或 24 小时制、时间步长和不可选时段；跨地区协作还要显示时区。
先知道
也常被叫作TimePicker
什么时候用
- 会议 / 日程的开始时间14:30
- 营业时间等时间段：开始 + 结束一对营业时间09:00→18:00
- 定时任务：每天几点自动执行每天09:00自动同步数据
- 按业务步长选择：例如预约服务按半小时提供时段每 30 分钟一档，不会选出 09:17
什么时候不用
- 还需要选择日期：使用 日期选择器 Date Picker 的日期时间模式14:30需要具体时刻时，还应提供日期
- 只需上午 / 下午等粗粒度时段：使用 选择器 Select选「上午」而已，分钟级面板太重
- 允许自由输入自然语言时间：系统难以稳定解析，应提供结构化选项时间下午三点解析失败：请输入 HH:mm
- 跨时区场景不标时区：相同时间在不同地区会对应不同时刻14:30跨时区安排应明确标注时区
组成结构 · Anatomy
14:30131415
显示已选时间
小时、分钟各一列，可滚动
一个可选的时刻
当前时间，居中高亮
常见变体 · 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周末 · 晨跑
＋ 添加闹钟
延伸阅读 · 权威出处