日期选择器DatePicker
填写与选择从日历中选择日期或日期范围
先知道
日期选择器用日历减少日期格式带来的歧义，可以选择一天或一段时间。设计时要写清可选范围、开始和结束是否包含当天；跨地区业务还要说明按哪个时区计算。
2026-07-21📅
‹2026 年 7 月›
一二三四五六日
293012345
6789101112
13141516171819
20212223242526
272829303112
什么时候用
- 选单个日期：生日、截止日期、预约日2026-07-212026 年 7 月一二三四五六日20212223242526
- 选一段时间：报表区间、酒店入住离店07-10→07-171011121314151617
- 有些日期不能选：过去的日子、已约满的时段选个预约日19202122232425过去的日子不可选
- 常用区间一键选：今天、最近 7 天、最近 30 天今天最近 7 天最近 30 天07-15 ~ 07-21
什么时候不用
- 让用户手输日期文本：格式五花八门，还容易写错日期2026/7/32手输的日期，格式和日子都能错
- 只选时间不要日期 → 用 时间选择器 TimePicker14:30
- 粒度很粗：只要「最近一个月」→ 用 选择器 Select只要「最近一个月」，搬出整个日历太重13141516171819
- 每周固定几天：周一三五 → 用 复选框 Checkbox前端后端设计
组成结构 · Anatomy
2026-07-21📅‹2026 年 7 月›1314151617181920212223242526
1触发框Trigger显示已选日期，格式统一
2月份头部Header切换年月的导航条
3日期网格Day Grid7 列一周，一眼看全整月
4日期格Day Cell普通一天，悬停高亮
5选中日Selected Day当前选中的日期，实心高亮
常见变体 · 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