<form id="date-demo-form"><div class="demo-row"> <div style="display:grid;gap:6px"> <label for="date-publish" class="demo-label">发布日期</label> <div class="icen-date-picker" data-icen-date-picker> <button id="date-publish" class="icen-date-picker-trigger" type="button"><span class="icen-date-picker-value">2026-10-17</span></button> <input type="hidden" name="发布日期" value="2026-10-17" /> </div> </div> <div style="display:grid;gap:6px"> <label for="date-release" class="demo-label">十一月排期 · 小号</label> <div class="icen-date-picker" data-icen-date-picker data-icen-date-picker-min="2026-11-01" data-icen-date-picker-max="2026-11-30" data-icen-date-picker-week-start="0"> <button id="date-release" class="icen-date-picker-trigger icen-date-picker-trigger--sm" type="button"><span class="icen-date-picker-value">2026-11-09</span></button> <input type="hidden" name="十一月排期" value="2026-11-09" /> </div> </div> <div style="display:grid;gap:6px"> <label for="date-review" class="demo-label">复盘日期 · 大号</label> <div class="icen-date-picker" data-icen-date-picker data-icen-date-picker-placeholder="选择复盘日期"> <button id="date-review" class="icen-date-picker-trigger icen-date-picker-trigger--lg" type="button"><span class="icen-date-picker-value is-empty">选择复盘日期</span></button> <input type="hidden" name="复盘日期" /> </div> </div> <div style="display:grid;gap:6px"> <label for="date-locked" class="demo-label">已锁定的排期</label> <div class="icen-date-picker" data-icen-date-picker> <button id="date-locked" class="icen-date-picker-trigger" type="button" disabled><span class="icen-date-picker-value">2026-11-20</span></button> <input type="hidden" name="锁定排期" value="2026-11-20" disabled /> </div> </div></div><p class="demo-label" id="date-feedback" role="status"><bdi>选择日期后在这里查看结果。可以用键盘操作日历。</bdi></p><button class="icen-btn icen-btn-sm" type="reset" id="date-reset">恢复初始日期</button></form>特性
- 键盘：方向键按天 / 周移动，Home/End 定位周首尾，PageUp/PageDown 翻月，加 Shift 翻年
- 结构：日历由原生按钮组成，可连续导航的日期网格
- 形态：单日期 / 日期范围 / 今日入口 / 禁用日期 / 清除重置
- 表单：选中值与原生表单字段保持一致
接口
- 初始化
initDatePicker()（kit 一行入口可直接命名导入）- 导出
-
initDatePicker - 事件
-
icen:date-changedetail 契约见IcenEventMap - 类型
dist/behaviors/date-picker.d.mts（随 npm 包发布，含全部 JSDoc 约束）
安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import { initDatePicker } from '@icen.ai/ui/kit/date-picker';initDatePicker();也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add date-picker
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/date-picker.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
import { initDatePicker } from '@icen.ai/ui/behaviors/date-picker';const dispose = initDatePicker(); // 卸载时 dispose()，可重新初始化// 只需隐藏输入，行为自动补齐触发器、日期文本与共享日历图标。// 如需尺寸、label 或插槽，提供自己的 .icen-date-picker-trigger 即可。<div class="icen-date-picker" data-icen-date-picker data-icen-date-picker-min="2026-11-01" data-icen-date-picker-max="2026-11-30"> <input type="hidden" name="publish_date" value="2026-11-09" /></div>// data-icen-date-picker-format/min/max/week-start/placeholder 与 data-icen-panel-* 可动态更新。// input / change 或原生 form.reset() 会同步日期。日期变化派发 icen:date-change 与 input.change。// Arrow / Home / End 移动；PageUp/Down 翻月，Shift 翻年；Escape 归还触发器焦点。root.addEventListener('icen:date-change', (event) => console.log(event.detail.value));