日期选择器
日期输入默认使用等宽字体并带日历图标。面板宽度 260px，选中日期使用 cdx-700 实底，快捷选项覆盖今天、本周、本月与最近 7 天。
23 · DATEPICKER · 日期选择器
日期输入框 + 日历面板
<
2026 年 5 月
>
日
一
二
三
四
五
六
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
今天
本周
本月
<section id="datepicker" class="section">
<div class="section-title">23 · DATEPICKER · 日期选择器</div>
<div class="demo-sub">日期输入框 + 日历面板</div>
<div class="demo-box">
<div style="display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap">
<div>
<div style="position:relative;display:inline-block">
<input type="text" value="2026-05-22" style="padding:8px 32px 8px 12px;border:1px solid #185058;border-radius:6px;font-size:14px;font-family:ui-monospace,monospace;letter-spacing:0.02em;width:160px;outline:none;box-shadow:0 0 0 3px rgba(24,80,88,0.08)" />
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#A1A1AA" stroke-width="2" stroke-linecap="round" style="position:absolute;right:10px;top:50%;transform:translateY(-50%)"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
</div>
</div>
<div style="background:#fff;border:1px solid #E4E4E7;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,0.08);padding:12px;min-width:260px">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
<span class="cal-nav" data-delta="-1" role="button" aria-label="上个月"><</span>
<span style="font-size:14px;font-weight:600;color:#18181B" data-cal-label>2026 年 5 月</span>
<span class="cal-nav" data-delta="1" role="button" aria-label="下个月">></span>
</div>
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px">
<span style="text-align:center;font-size:12px;font-weight:600;color:#71717A;padding:4px 0">日</span>
<span style="text-align:center;font-size:12px;font-weight:600;color:#71717A;padding:4px 0">一</span>
<span style="text-align:center;font-size:12px;font-weight:600;color:#71717A;padding:4px 0">二</span>
<span style="text-align:center;font-size:12px;font-weight:600;color:#71717A;padding:4px 0">三</span>
<span style="text-align:center;font-size:12px;font-weight:600;color:#71717A;padding:4px 0">四</span>
<span style="text-align:center;font-size:12px;font-weight:600;color:#71717A;padding:4px 0">五</span>
<span style="text-align:center;font-size:12px;font-weight:600;color:#71717A;padding:4px 0">六</span>
</div>
<div data-cal-grid data-year="2026" data-month="5" style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px">
<span class="cal-day is-outside">26</span>
<span class="cal-day is-outside">27</span>
<span class="cal-day is-outside">28</span>
<span class="cal-day is-outside">29</span>
<span class="cal-day is-outside">30</span>
<span class="cal-day">1</span>
<span class="cal-day">2</span>
<span class="cal-day">3</span>
<span class="cal-day">4</span>
<span class="cal-day">5</span>
<span class="cal-day">6</span>
<span class="cal-day">7</span>
<span class="cal-day">8</span>
<span class="cal-day">9</span>
<span class="cal-day">10</span>
<span class="cal-day">11</span>
<span class="cal-day">12</span>
<span class="cal-day">13</span>
<span class="cal-day">14</span>
<span class="cal-day">15</span>
<span class="cal-day">16</span>
<span class="cal-day">17</span>
<span class="cal-day">18</span>
<span class="cal-day">19</span>
<span class="cal-day">20</span>
<span class="cal-day">21</span>
<span class="cal-day is-selected">22</span>
<span class="cal-day">23</span>
<span class="cal-day">24</span>
<span class="cal-day">25</span>
<span class="cal-day">26</span>
<span class="cal-day">27</span>
<span class="cal-day">28</span>
<span class="cal-day">29</span>
<span class="cal-day">30</span>
<span class="cal-day">31</span>
<span class="cal-day is-outside">1</span>
<span class="cal-day is-outside">2</span>
<span class="cal-day is-outside">3</span>
<span class="cal-day is-outside">4</span>
<span class="cal-day is-outside">5</span>
<span class="cal-day is-outside">6</span>
</div>
<div style="border-top:1px solid #E4E4E7;padding-top:8px;margin-top:8px;display:flex;gap:8px;flex-wrap:wrap">
<span class="cal-shortcut">今天</span>
<span class="cal-shortcut">本周</span>
<span class="cal-shortcut">本月</span>
</div>
</div>
</div>
</div>
</section>安装
在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。
<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>使用方式
在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。
组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。
设计规范
完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。