Date Picker
日期选择器
WebMobileDesktop上手难度: 中等
一个日历，点开可以选日子。
Live Demo
真的可以点Live Demo Playground
2026 年 3 月
一二三四五六日
已选择 2026 年 3 月 12 日
你刚才看到的这个：订机票时选出发日期、预约挂号选就诊日、统计后台选日期范围——点一下弹出的月历。
它到底是什么
Date Picker 的难点不是「弹出日历」，而是让用户理解「哪些日子能选」。出生日期不能选未来、已过去的日期要置灰、跨度范围要说明——这些约束必须在日历上直接可见。
日期选择date pickercalendar picker日历选择date field
Anatomy · 它由什么组成
Trigger触发框
显示已选日期或占位
Calendar月历
7×6 网格
Valid / Disabled可选/禁用日
禁用日置灰不可点
Selected选中日
填充主色
Range Highlight区间高亮
范围选择时高亮中间
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 用户需要选择一个具体日期 | 用 |
| 日期有合法性约束（不能选过去） | 用 |
| 选错代价高（预约、租期、账单） | 用 |
| 需要选一段范围 | 视情况 |
| 只需要大概的月份/年份 | 视情况 |
单纯为了「填个日期」而让用户点两次日历，很多场景不如让文本框接受 2026-03-15 这种格式。
记住：别让用户为格式报错。允许多种输入，错了再提示。
Similar Patterns
别搞混一句话区分：一个日历，点开可以选日子。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个日期选择器：默认今天，不能选过去日期，弹出的月历里过去的日期置灰不可点，选中后回填到输入框。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个选日期的。
改成这样说
加 Date Picker：默认今天、过去的日期置灰禁用不可点、选中日填充主色、今天加描边标记，键盘方向键可移动、Enter 选中、Esc 关闭。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。