日期选择器
Date Picker
初级通用日期选择器（Date Picker）是表单中供用户选择某一天或一段日期的控件，通常会展开日历。它帮用户看着月份选日期，也让产品更容易限制可选范围，例如订会议室时只开放未来的日期。
你可能会说：「帮我做个填日期的地方，点开能看日历，已经过去的日子不能选。」
动手看看预约会议室的日期选择器
展开日历
查看月份
选中的日期
悬停日期框和日历里的日期试试；下方开关模拟点击日期框，月份和日期参数模拟翻月、选日。日历浮在表单上方，盖住了部分参会人数和时段信息。
这是贴着日期框展开的气泡浮层，不像确认弹窗那样遮住整页。选好日期或再次点击日期框，就可以收起它。
7 月 12、13 日被置灰：会议室需要至少提前两天预约。限制直接画在日历上，比提交表单后才报错更好懂。
要点日期选择器帮用户完成了什么？
- 1
把选日期放进日历视图
用户点开控件后，可以按月份找到要选的日子。像预约下周三的会议室，看到星期几比只填一串数字更容易确认自己有没有选错。
- 2
可选日期由业务规则决定
日期选择器可以把不符合条件的日子标成不可选，比如预约服务不能选过去的日期。我们得先说清规则，因为控件本身不知道哪天还有名额。
- 3
选完之后仍要校验结果
日历能减少误选，但不能代替数据校验。用户可能手动输入日期，名额也可能在选完后发生变化，所以提交表单时还要检查日期格式和业务条件。
容易混淆的地方
日期选择器处理的是日历日期，不等于时间选择器：约医生看诊若要精确到几点，还需要选择时段。它也不等于普通输入框；输入框让用户自己按格式填写，日期选择器则提供日历供用户查看和选择。两者可以结合，让用户既能点选也能输入。
什么时候用
适合用
- 做酒店预订页时，让用户选择入住和退房日期，并限制退房日期晚于入住日期。
- 做后台活动配置时，让运营人员在日历上选择报名截止日，同时看清它是星期几。
- 做预约表单时，让用户从未来可预约的日期中选一天，再继续选择具体时段。
不适合用
- 只让用户选择「今天、明天、后天」三种配送安排时，用单选框直接列出选项更省事。
- 填写出生年份且业务只关心年份时，不必让用户翻日历；用年份输入框或选择器即可。
- 设置每天固定的提醒时间时，要选的是几点几分，而不是哪一天；用时间选择器更合适。
练一练选一个答案，看看解释
你在做会议室预约页：用户要选未来某一天，再选当天的空闲时段。哪种做法最贴合需求？
让 AI 帮你做复制给 AI Agent 直接用
请为会议室预约表单做日期选择器，只允许选择今天及之后仍可预约的日期。选定日期后展示当天的空闲时段；提交时再次校验日期和时段是否有效，并给出清楚的错误提示。