FORM & INPUT
日期选择器Date Picker
点击输入框弹出日历面板，支持单日或日期范围选择。比让用户手动输入日期格式更不容易出错。
效果预览
2026-11-05 ~ 2026-11-08📅
‹2026 年 11 月›
日一二三四五六
25262728293031
12345678
91011121314
15161718192021
22232425262728
293012345
适合用在哪
表单中需要选择日期或日期范围的场景：预约、报表筛选、生日、有效期、行程。
不适合：只需要输入年份或月份的简单场景：用原生 <input type="month"> / <input type="date"> 更轻；日期格式需要严格本地化（如伊斯兰历、财年）时，日历控件维护成本高。
和相近模式的区别
自动补全输入Combobox / Autocomplete
Combobox 是从有限选项中搜索选择；Date Picker 是有固定网格结构的日历选择，更强调日期之间的空间关系（星期、月份、范围）。
容易踩的坑
- placeholder 写死格式但没有校验，用户输入 11/5/26 和 2026-11-05 混用，后端解析失败。
- 日期范围模式下两个输入框共用同一个面板，用户不知道应该先点起始日还是结束日。
- 移动端直接弹出完整日历面板，把输入框顶出视口，应优先调用原生日期输入。
设计提示词 · Prompt
日期选择器（Date Picker）：输入框右侧固定一枚 16px 的日历图标按钮（aria-label="选择日期"），输入框本身只读或 placeholder 为"YYYY-MM-DD"。点击后下方浮出白底日历面板：圆角 10-12px、1px 浅描边、大投影、距输入框 4-6px。面板顶部一行：左侧两个三角月导航按钮、中间「2026 年 11 月」加粗标题、右侧一个「今天」链接；下方 7 列日期网格，表头为 日 一 二 三 四 五 六。日期默认 14px、居中、圆角 999px；当前月外日期置灰；今天用 1px 描边圆环；悬停日期浅品牌色底；选中日期实心品牌色圆底 + 白字。范围选择：起始日与结束日实心品牌色，中间日期用浅品牌色填充，三者连成一段；单日选择时只显示一个实心圆。面板宽度 260-280px、内部 padding 12-14px。键盘：↑↓←→ 在日期网格移动、Enter 选中、Esc 关闭、PgUp/PgDn 切换月份。
Date Picker: an input field with a fixed 16px calendar icon button on the right (aria-label="Pick a date"). Clicking opens a white rounded calendar panel below the input: 10-12px radius, 1px light stroke, large shadow, 4-6px below the field. Panel header: month navigation arrows + bold "November 2026" + a "Today" link. Below is a 7-column date grid with day-of-week headers. Default dates are 14px, centered, pill-shaped; outside-month dates muted; today shown with a 1px ring; hover shows light brand background; selected date uses solid brand circle with white text. Range mode: start and end dates solid brand, in-between dates filled with light brand. Panel width 260-280px, padding 12-14px. Keyboard: arrow keys move focus, Enter selects, Esc closes, PgUp/PgDn changes month.
可复制 CSS
自包含的最小实现，粘贴到空白页面即可生效；类名可以按项目规范改名。
/* <div class="date-picker"><input value="2026-11-05" readonly><button aria-label="选择日期">📅</button><div class="date-picker__panel">...</div></div> */
.date-picker { position: relative; display: inline-flex; align-items: center; gap: 8px; width: 240px; }
.date-picker input { flex: 1; height: 40px; padding: 0 12px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; font: 15px/1 system-ui, sans-serif; }
.date-picker button { width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer; }
.date-picker__panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 270px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 16px 40px -12px rgba(0,0,0,.18); }
.date-picker__panel[hidden] { display: none; }
.date-picker__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.date-picker__hd button { width: 24px; height: 24px; border: 0; background: #f3f4f6; border-radius: 6px; cursor: pointer; }
.date-picker__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.date-picker__days button { width: 32px; height: 32px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font: 14px/1 system-ui, sans-serif; }
.date-picker__days button:hover { background: #eef2ff; }
.date-picker__days button[aria-selected="true"] { background: #4f46e5; color: #fff; }
.date-picker__days button[data-outside] { color: #9ca3af; }
演示 HTML 结构
<div class="s d-center">
<div class="form-date">
<div class="form-date__input"><span>2026-11-05 ~ 2026-11-08</span><em>📅</em></div>
<div class="form-date__panel">
<div class="form-date__hd"><i>‹</i><b>2026 年 11 月</b><i>›</i></div>
<div class="form-date__week"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
<div class="form-date__days">
<span class="form-date__day form-date__day--mute">25</span><span class="form-date__day form-date__day--mute">26</span><span class="form-date__day form-date__day--mute">27</span><span class="form-date__day form-date__day--mute">28</span><span class="form-date__day form-date__day--mute">29</span><span class="form-date__day form-date__day--mute">30</span><span class="form-date__day">31</span>
<span class="form-date__day">1</span><span class="form-date__day">2</span><span class="form-date__day">3</span><span class="form-date__day">4</span><span class="form-date__day form-date__day--today form-date__day--start">5</span><span class="form-date__day form-date__day--range">6</span><span class="form-date__day form-date__day--range">7</span><span class="form-date__day form-date__day--end">8</span>
<span class="form-date__day">9</span><span class="form-date__day">10</span><span class="form-date__day">11</span><span class="form-date__day">12</span><span class="form-date__day">13</span><span class="form-date__day">14</span>
<span class="form-date__day">15</span><span class="form-date__day">16</span><span class="form-date__day">17</span><span class="form-date__day">18</span><span class="form-date__day">19</span><span class="form-date__day">20</span><span class="form-date__day">21</span>
<span class="form-date__day">22</span><span class="form-date__day">23</span><span class="form-date__day">24</span><span class="form-date__day">25</span><span class="form-date__day">26</span><span class="form-date__day">27</span><span class="form-date__day">28</span>
<span class="form-date__day">29</span><span class="form-date__day">30</span><span class="form-date__day form-date__day--mute">1</span><span class="form-date__day form-date__day--mute">2</span><span class="form-date__day form-date__day--mute">3</span><span class="form-date__day form-date__day--mute">4</span><span class="form-date__day form-date__day--mute">5</span>
</div>
</div>
</div>
</div>
常见问题
日期选择器要不要用原生 <input type="date">？
如果产品对日期格式没有品牌一致性要求，移动端优先用原生 input，因为会调出系统日历且键盘适配最好。桌面端或需要范围选择、自定义面板时再用自研组件。
范围选择是两个输入框还是一个面板？
单面板更常见：用户点第一个日期为起点，再点第二个为终点，中间自动填充。两个输入框在视觉上直观，但交互流程更长；任选一种后保持全站一致。
常见搭配
同一页面里经常和「日期选择器」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。