正在进入 VibeHub 实训中心…/ 正在加载 AI 实战词典、互动闯关与三分钟配方
日期选择器Date Picker
你可能会说
日期别让用户手输，给个日历直接挑。
日期选择器是用日历选择某一天或一段日期的表单控件预订入住日期或筛选本月订单时可用日历降低格式歧义。要说明可选范围、区间是否包含当天；跨地区业务还必须说明计算日期的时区。
先知道
也常被叫作DatePicker
你可以这样告诉 AI Agent
请把入住和离店做成联动的日期区间选择器：已满和不允许的日期不可选，离店必须晚于入住，并明确区间是否包含离店当天。测试跨月选择、修改入住日和无可用日期三种情况。
什么时候用
- 选单个日期：生日、截止日期、预约日2026-07-212026 年 7 月一二三四五六日20212223242526
- 选一段时间：报表区间、酒店入住离店07-10→07-171011121314151617
- 有些日期不能选：过去的日子、已约满的时段选个预约日19202122232425过去的日子不可选
- 常用区间快速选择：今天、最近 7 天、最近 30 天今天最近 7 天最近 30 天07-15 ~ 07-21
什么时候不用
- 让用户手输日期文本：格式五花八门，还容易写错日期2026/7/32手输的日期，格式和日子都能错
- 只需选择时间而不选日期：使用 时间选择器 Time Picker14:30
- 只需粗粒度时间范围，如“最近一个月”：使用 选择器 Select仅需粗粒度范围时，完整日历增加操作成本13141516171819
- 选择每周固定日期，如周一、周三、周五：使用 复选框 Checkbox前端后端设计
组成结构 · Anatomy
2026-07-21📅‹2026 年 7 月›1314151617181920212223242526
显示已选日期，格式统一
切换年月的导航条
按每周 7 列排列，展示整月日期
普通一天，悬停高亮
当前选中的日期，实心高亮
常见变体 · Variants
单日期Single
1314151617181920212223242526
只需选择一天时，例如生日或截止日期
范围选择Range
07-10
→07-17
1011121314151617
要选开始和结束两天的一段区间
禁用日期Disabled
19202122232425
过去不可约
日期不可选时，提前以禁用状态说明限制
快捷选项Shortcuts
今天最近 7 天最近 30 天
07-15 ~ 07-21
高频时间范围可提供快捷选项，减少逐日选择
典型使用场景
报表时间筛选
经营报表
最近 7 天
07-15 ~ 07-21📅
销售额
¥ 82,410
▲ 12.4%
订单量
1,286
▲ 8.1%
客单价
¥ 64
▼ 2.3%
预约日程
预约线下体验
选择到店日期，灰色为已约满
2026-07-23📅
一二三四五六日
20212223242526
设置截止日期
官网 2.0 上线进行中
负责人
林小hu
林小hu
截止日期
2026-07-31📅
还剩 10 天，逾期会提醒负责人
机票酒店预订
深圳 ⇄ 杭州
入住 07-24
→
离店 07-27
一二三四五六日
20212223242526
272829303112
延伸阅读 · 权威出处
快速练习