界面图鉴
日期选择器Date Picker
日期选择器到底是什么？是一个日历，还是一种输入框？
点开日历选一天或一段日期，把「哪天」填进表单；常见于预约、出行和报表筛选。
01 · 拆开看看
这一块由什么组成
Picker 是「选择器」：日历不只是用来看的，还负责把选中的日期交给表单。它可以点开才出现，也可以直接铺在页面上。下面以 2026 年 9 月为例，演示当天为 10 日、选中 17 日：
日期入口Date Field
有明确标签的日期框，显示所选日期；日历图标提示可以展开选择。
月份导航Month Navigation
显示当前年月，左右翻月；选生日等较远日期时，应支持快速切换年份。
日期网格Calendar Grid
星期标题加日期格，让人按周定位；一周从哪天开始要符合地区习惯。
日期状态Date States
今天、已选中、不可选要能区分：图中 10 日描边、17 日填色、过去日期淡化并划线。
快捷操作Quick Actions
可按需提供「今天」「清空」或确认按钮；是否立即提交要保持一致。
02 · 常见变体
同一个零件，几种摆法
从弹出的月历里选一天，适合预约日期、截止日期等单个值。
选择开始和结束日期，连起一段区间，适合报表筛选和出行日期。
月历直接铺在页面里，不需要先展开，适合日期选择是主要任务的预约页。
03 · 火眼金睛
这个出行表单里，哪一块是 Date Picker？
下面是示意界面，点整块控件来辨认：谁在选择日期，谁只是在选地点或时间？
点一块试试，看看它叫什么
这是目的地的下拉选择，从预设地点里挑一项；它没有年、月、日的关系。
就是它！日期输入框连着月历，选择某一天后把结果填回框里；这里选中的是 9 月 17 日。
它只选择「几点几分」，不选择「哪一天」。需要完整预约时间时，两种选择器可以一起用。
04 · 用与不用
什么时候该上它
- 预约、出发或截止日期，需要看清星期和可选日期
- 报表筛选、住宿等需要选择起止日期的任务
- 需要禁止过去日期或限制可预约范围的表单
- 只选几点几分——用 Time Picker
- 只展示日程、不需要填写日期——用日历视图
- 输入生日却只能逐月翻几十年——改用直接输入或快捷选年
05 · 想一想
一道题，检查眼力
报表需要筛选「9 月 14 日到 18 日」的数据，怎样让用户选得清楚又不容易出错？
对。两个端点和中间范围都看得见，规则也明确；还要说明筛选是否包含结束日。
日期被拆到不同地方，既难确认范围，也难校验。范围选择器能把这件事一次说清。
两只框不等于清晰的范围。必须说明哪个是开始、哪个是结束，并处理倒序和空值。
06 · 说给 AI 听
让 AI 改它时，这样说
说清单日还是范围、默认值、可选区间、日期格式和确认方式；别只说「放一个日历」。
给预约表单加一个 date picker，标签写「预约日期」，只允许选今天及以后，选中后回填日期
报表筛选改成 date range picker，标明开始和结束日期，结束不能早于开始，范围包含结束日
生日字段的 date picker 支持直接输入 YYYY-MM-DD 和快速选年，输入无效日期时给出明确提示
手机上使用原生日期选择器；这里保存的是日期而非时间点，统一存 YYYY-MM-DD，不做时区转换
最容易踩的坑
日期不等于时间点：生日等纯日期不要因时区换算偏移一天。原生 input type="date" 的外观随浏览器和地区变化；自定义日历还要支持键盘选日、焦点返回和可读的完整日期，不能只做一个能用鼠标点的网格。