时间选择器
Time Picker
初级通用时间选择器（Time Picker）是让你在表单里选定一天中具体时刻的控件，通常提供小时和分钟。它解决手输时间格式不统一、可选时段不明确的问题，比如在预约页面选择 14:30。
你可能会说：「我想让用户预约时直接挑几点几分，还能限制只能选营业时间内的时段。」
动手看看预约到店时间
把鼠标移到时间框或选项上看看反馈；用「展开时间选项」开关模拟点击时间框，再切换「选定时间」观察输入框和高亮项如何同步。
选项浮在表单上方，暂时盖住了「预约事由」，但没有像确认弹窗那样遮住整个页面。划掉的 12 点时段已约满，不能选。
当前选的是 14 点 30 分：输入框给出统一的时间格式，浮层里分别标出小时和分钟，省去手输时猜格式的麻烦。
要点时间选择器要帮用户确定什么？
- 1
先分清选时刻还是选时段
你做预约开始时间时，用户选的是一个时刻；做营业时间设置时，用户可能要选开始和结束两个时刻。先说清楚这一点，AI 才不会只做一个输入框，却漏掉结束时间。
- 2
可选时间跟业务规则走
比如门店只在 10:00 到 18:00 接单，而且每半小时开放一个名额。时间选择器可以只展示或允许这些时刻；已约满的时刻也要处理，这样用户不会选完才发现无法提交。
- 3
显示方式和提交值要说清
界面可以显示“下午 2:30”，提交给系统时却采用约定的时间格式。你和 AI 协作时，把分钟精度、12 小时或 24 小时显示方式说清楚，再确认后端如何解释这个时间。
容易混淆的地方
时间选择器选的是一天中的几点几分，日期选择器选的是哪一天；预约具体开会时间时，通常要把日期和时间一起确定。它也不是用来填写“持续多久”的：时长是数量，选了 14:30 并不能说明会议会开 30 分钟还是一小时。
什么时候用
适合用
- 做预约页面时，让用户在选定日期后挑选当天可预约的开始时间。
- 做后台营业设置时，让店员分别选择每天的开门和关门时刻。
- 做定时发送功能时，让用户指定消息在所选日期的几点几分发出。
不适合用
- 用户只需选哪一天到店、不指定几点时，用日期选择器就够了。
- 用户填写任务预计耗时，比如 45 分钟时，用时长输入或数字输入框更贴切。
- 用户只需选“上午、下午、晚上”这类粗略时段时，用单选项即可。
练一练选一个答案，看看解释
你在做门店预约页：用户已经选好日期，门店只开放 10:00 到 18:00 的半小时预约档，部分档位已约满。接下来怎么设计时间字段？
让 AI 帮你做复制给 AI Agent 直接用
请在预约表单的日期字段后加入时间选择器，按所选日期显示 10:00 到 18:00、每半小时一个的预约时刻；已约满的时刻不可选。界面用 24 小时制显示，提交时将日期和所选时间一起传给后端。