日期选择器Date Picker
你可能会说
日期别让用户手输，给个日历直接挑。
日期选择器是用日历选择某一天或一段日期的表单控件预订入住日期或筛选本月订单时可用日历降低格式歧义。要说明可选范围、区间是否包含当天；跨地区业务还必须说明计算日期的时区。
也常被叫作DatePicker
组成结构 · 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
延伸阅读 · 权威出处