- 时段状态
- 可预约 · 待确认
- 步长
- 30 分钟
- 时区
- 门店时区（UTC+8）
改选任一时段或切换日期，这份摘要会一起变——结果长在物件上，不只靠底部说明。
界面与交互 · 操作与输入
时间选择器TimePicker
按步长列出一天中的可选时段，并把营业区间、午休、库存与日期联动等规则即时校验、说明的控件。
选一个可预约时段：结果立刻长在预约摘要上
时间选择器按步长列出一天中的时段，并把营业区间、午休、库存和日期联动即时校验。亲手操作时段网格、日期切换和确认，观察预约摘要怎样即时变。
第 0 步：这是「门店预约」的时段选择区。在网格里选一个时刻，观察「不可用时段留下但禁用并标原因」「选中立即更新预约摘要」「切到周日全部禁用」三件事。
预约日期
营业 09:00–18:00 · 步长 30 分钟 · 12:00–13:30 午休 · 17:30 已约满
对照：选中 10:30，预约摘要立即更新为可预约。原因：选择即时生效，不必等提交。下一步：点「确认预约」提交，或在网格里改选。
面板教会的知识点
把刚才操作里看到的现象命名为六条规则。
- 步长：网格只列 30 分钟整点时段，用户不必输入任意时刻。
- 营业区间：08:30 与 18:00 留在网格里但禁用并标「营业外」，边界可见。
- 午休：12:00–13:30 的时段留下但禁用并标「午休」，不是悄悄消失。
- 已约满：17:30 标「已满」，单个时段的库存变化不波及其它时段。
- 与日期联动：切到周日，全部时段变「营业外」，原选择失效，提交被锁。
- 即时生效：选中后预约摘要立即更新；按门店时区保留，不必等提交。
什么时候用时间选择器
从是否需要按业务规则校验时刻判断，而不是看控件长什么样。
选一天中的时刻且要按规则校验——门店预约、提醒发送时刻、航班出发时间。
需要跨天范围（→ 日期范围选择器）、任意时长（→ 数字输入）、或纯文本时间（→ 输入框 + 严格解析）。
怎么用：从步长到确认
最短路径——步长、规则、即时校验一次到位。
- 列出步长时段；营业区间外的时刻留下但禁用并标「营业外」。
- 业务规则禁止的时段（午休、已约满）同样留下但禁用并标原因。
- 选中即时更新摘要卡与提交按钮；明确按门店或事件时区保留。
- 改日期后重新校验原时段；无可预约时段时说明原因并指向相邻日期。
正反例：同一个「门店预约时段」需求
只改一个关键判断——是否在提交前把不可用时段说清。
列出 30 分钟时段，午休与已满时段禁用并标原因；改日期刷新；无可选时段时提示相邻日期。
只放一个时间输入框，午休和营业外不做校验，提交后才报「该时段不可预约」——用户白填一次。
快速自测
用户把预约日期从工作日改到周日，原选的 10:30 在周日不营业，应当？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。