<div class="demo-row"> <div class="date-picker" data-date-picker data-date-picker-placeholder="选择发布日期"> <button class="date-picker-trigger" type="button"> <span class="date-picker-value is-empty"></span> <span class="date-picker-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg></span> </button> <input type="hidden" name="date1" /> </div> <div class="date-picker" data-date-picker data-date-picker-placeholder="有范围限制" data-date-picker-min="2026-07-01" data-date-picker-max="2026-12-31"> <button class="date-picker-trigger" type="button"> <span class="date-picker-value is-empty"></span> <span class="date-picker-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg></span> </button> <input type="hidden" name="date2" value="2026-07-29" /> </div></div>安装
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';initDatePicker(); <div class="date-picker" data-date-picker> <button class="date-picker-trigger" type="button"> <span class="date-picker-value is-empty"></span> <span class="date-picker-icon">…日历 svg…</span> </button> <input type="hidden" name="date" /></div><!-- 可选 data-date-picker-format/min/max/week-start/placeholder -->