iter(g50): 新增 datePicker 日期选择组件

.ua/index.json

@@ -1,6 +1,6 @@
 {
   "$schema": "ui-arch-registry-index/0.1",
-  "generatedAt": "2026-10-26T04:12:36.698Z",
+  "generatedAt": "2026-10-26T04:13:49.611Z",
   "repoRoot": ".",
   "packages": [
     {
@@ -191,7 +191,8 @@
           "transfer(props)：穿梭框，左右两栏勾选后整体搬运，targetKeys 信号双向绑定，两栏各自搜索与全选（含半选），禁用条目不参与搬运也不可勾选",
           "cascader(props)：级联选择，多列联动面板（悬停下钻 / 点击提交），value 为路径数组信号，changeOnSelect 允许停在中间层，全键盘可操作",
           "splitter(props)：可拖拽分栏容器，分隔条支持指针拖拽 / 方向键微调 / 双击复位，sizes 为百分比数组信号",
-          "autoComplete(props)：输入联想，输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起，options 可传函数做远程联想"
+          "autoComplete(props)：输入联想，输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起，options 可传函数做远程联想",
+          "datePicker(props)：日期选择，单月网格 + 翻月 / 今天快捷键，value 为 YYYY-MM-DD 信号，min/max 闭区间限制，方向键逐日逐周可导航"
         ],
         "keyTypes": [
           "ButtonProps",
@@ -2252,6 +2253,51 @@
               "options 传函数时每次输入都会用当前关键字调用，可在此发起远程请求并返回新数组",
               "value 传信号即受控：外部写入会同步回填输入框内容"
             ]
+          },
+          {
+            "id": "datePicker",
+            "title": "日期选择 DatePicker",
+            "demo": "sec-datepicker",
+            "props": [
+              {
+                "n": "value",
+                "t": "Signal<string>",
+                "d": "选中日期（YYYY-MM-DD）信号；不传则内部维护"
+              },
+              {
+                "n": "placeholder",
+                "t": "string",
+                "d": "未选时占位文案；缺省「请选择日期」"
+              },
+              {
+                "n": "min",
+                "t": "string",
+                "d": "最早可选日期（含，YYYY-MM-DD）；更早的日置灰不可点"
+              },
+              {
+                "n": "max",
+                "t": "string",
+                "d": "最晚可选日期（含，YYYY-MM-DD）；更晚的日置灰不可点"
+              },
+              {
+                "n": "disabled",
+                "t": "boolean | Signal<boolean>",
+                "d": "禁用触发器"
+              },
+              {
+                "n": "onChange",
+                "t": "(date: string) => void",
+                "d": "选中回调（点击日期或 Enter）"
+              }
+            ],
+            "example": "datePicker({ value: dateVal, min: '2026-10-20', max: '2026-10-31', onChange: (d) => toast.success(d) })",
+            "steps": [
+              "点触发器展开当月网格，打开时视图自动对准已选日期（无选中则今天）",
+              "‹ › 翻月，底部「今天」一键跳今天并提交；今天用描边标记、选中用实心底色",
+              "键盘：←→ 逐日、↑↓ 逐周、PageUp/PageDown 逐月、Enter 提交，跨月会自动翻页",
+              "min / max 为闭区间，越界日期置灰不可点也不可键盘选中",
+              "value 传信号即受控；Esc 收起（与弹窗/抽屉共用逐层关闭栈）"
+            ]
           }
         ]
       },

AGENTS.md

@@ -21,7 +21,7 @@
 
 - `packages/core/table-core`（@ui-arch/table-core）：Headless 表格逻辑内核
 - `packages/core/frame`（@ui-arch/frame）：signal + hyperscript 微框架
-- `packages/skin/ui`（@ui-arch/ui）：48 个 DOM 组件（表单 / 反馈 / 浮层 / 导航 / 表格），样式只消费令牌
+- `packages/skin/ui`（@ui-arch/ui）：49 个 DOM 组件（表单 / 反馈 / 浮层 / 导航 / 表格），样式只消费令牌
 - `packages/design/tokens`（@ui-arch/tokens）：设计令牌
 - `packages/tools/cli`（@ui-arch/cli）：`ua` 命令行 + MCP 注册表服务（private）
 - `apps/demo`（@ui-arch/demo）：交互演示，产物 apps/demo/dist/demo.html

ARCHITECTURE.md

@@ -34,7 +34,7 @@ ui-arch-mvp/
 │   │   ├── table-core/       # 表格状态内核
 │   │   └── frame/            # 信号 + hyperscript 微框架
 │   ├── skin/                 # 皮肤层（DOM 组件，可发布）
-│   │   └── ui/               # 48 个组件 + ui.css
+│   │   └── ui/               # 49 个组件 + ui.css
 │   ├── design/               # 资产层（可发布）
 │   │   └── tokens/           # --ua-* 设计令牌
 │   └── tools/                # 工程层（private，不发布）

README.md

@@ -11,13 +11,13 @@ npm run demo            # 打开演示：apps/demo/dist/demo.html
 npm run docs            # 生成人类文档站 apps/docs/index.html + Agent 全量文档 llms-full.txt
 ```
 
-## 组件（共 48 个）
+## 组件（共 49 个）
 
 <!-- ua:components -->
-accordion · alert · autoComplete · avatar · badge · breadcrumb · button · carousel · card · cascader · checkbox · dataTable · descriptions · divider · drawer · empty · form · image · inputNumber · list · menu · modal · notification · pagination · popover · progress · radioGroup · rate · result · segmented · select · skeleton · slider · spinner · splitter · statistic · stepper · switchButton · tabs · tag · textField · textarea · timeline · toast · tooltip · transfer · tree · upload
+accordion · alert · autoComplete · avatar · badge · breadcrumb · button · carousel · card · cascader · checkbox · dataTable · datePicker · descriptions · divider · drawer · empty · form · image · inputNumber · list · menu · modal · notification · pagination · popover · progress · radioGroup · rate · result · segmented · select · skeleton · slider · spinner · splitter · statistic · stepper · switchButton · tabs · tag · textField · textarea · timeline · toast · tooltip · transfer · tree · upload
 <!-- /ua:components -->
 
-分组：表单（button / textField / inputNumber / textarea / checkbox / switchButton / select / radioGroup / slider / rate / autoComplete / segmented / upload / form + formItem / transfer / cascader）、反馈（alert / toast / notification / result / spinner / progress / skeleton / badge / empty / statistic）、浮层（tooltip / popover / modal / drawer / menu）、导航（tabs / breadcrumb / pagination / accordion / stepper / tree）、数据展示（dataTable / descriptions / card / list / timeline / tag / avatar / image / carousel）、其他（divider / splitter）。
+分组：表单（button / textField / inputNumber / textarea / checkbox / switchButton / select / radioGroup / slider / rate / autoComplete / datePicker / segmented / upload / form + formItem / transfer / cascader）、反馈（alert / toast / notification / result / spinner / progress / skeleton / badge / empty / statistic）、浮层（tooltip / popover / modal / drawer / menu）、导航（tabs / breadcrumb / pagination / accordion / stepper / tree）、数据展示（dataTable / descriptions / card / list / timeline / tag / avatar / image / carousel）、其他（divider / splitter）。
 
 ## 可访问性约定
 
@@ -31,7 +31,7 @@ accordion · alert · autoComplete · avatar · badge · breadcrumb · button ·
 |---|---|
 | `packages/core/frame` | @ui-arch/frame：signal / computed / effect + hyperscript（无虚拟 DOM） |
 | `packages/core/table-core` | @ui-arch/table-core：headless 表格（filter → sort → paginate 派生管线） |
-| `packages/skin/ui` | @ui-arch/ui：48 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） |
+| `packages/skin/ui` | @ui-arch/ui：49 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） |
 | `packages/design/tokens` | @ui-arch/tokens：设计令牌（暗色只换值不换名） |
 | `packages/tools/cli` | @ui-arch/cli：`ua` 命令行与 stdio MCP server |
 | `apps/demo` | 交互演示（esbuild 打包成单文件） |

apps/demo/main.ts

@@ -19,6 +19,7 @@ import {
   cascader,
   checkbox,
   dataTable,
+  datePicker,
   transfer,
   descriptions,
   divider,
@@ -186,6 +187,7 @@ const listPick = signal(''); // 列表点击选中的条目标题
 const slideIndex = signal(0); // 轮播当前下标（外部受控演示）
 const cascaderPath = signal<string[]>(['east', 'sh']); // 级联选择路径（外部受控演示）
 const splitSizes = signal<number[]>([35, 65]); // 分栏比例（外部受控演示）
+const dateVal = signal('2026-10-26'); // 日期选择值（外部受控演示）
 const acValue = signal(''); // 自动补全输入值（外部受控演示）
 const treePick = signal('core'); // 树形选中节点 key
 const transferKeys = signal<string[]>(['a11y']); // 穿梭框右侧集合（外部受控演示）
@@ -683,6 +685,18 @@ const content = h(
       button({ label: '错误（可关）', variant: 'danger', onClick: () => notification({ title: '保存失败', description: '服务端返回 500，请稍后重试', variant: 'danger' }) }),
     ),
   ),
+  section(
+    'sec-datepicker',
+    '日期选择',
+    'datePicker：单月网格，翻月 / 今天 / ←→↑↓ 逐日逐周 / PageUp↓ 逐月，Esc 收起；min/max 闭区间置灰越界日。',
+    h(
+      'div',
+      { class: 'row' },
+      datePicker({ value: dateVal, onChange: (d) => toast.success(`已选 ${d}`) }),
+      datePicker({ placeholder: '只能选 10 月下旬', min: '2026-10-20', max: '2026-10-31' }),
+      h('span', { class: 'out' }, () => (dateVal() ? `当前日期：${dateVal()}` : '未选择')),
+    ),
+  ),
   section(
     'sec-autocomplete',
     '自动补全',

llms-full.txt

@@ -1,6 +1,6 @@
 # @ui-arch 组件库 Agent 文档（无图形版）
 
-> 自动生成于 2026-10-26T04:12:36.698Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
+> 自动生成于 2026-10-26T04:13:49.611Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
 
 ## 快速上手
@@ -1284,6 +1284,33 @@ autoComplete({ value: acValue, placeholder: '输入组件名', options: [{ value
 
 现场演示：apps/docs/demo.html#sec-autocomplete
 
+### datePicker — 日期选择 DatePicker
+
+参数：
+
+- value：Signal<string> —— 选中日期（YYYY-MM-DD）信号；不传则内部维护
+- placeholder：string —— 未选时占位文案；缺省「请选择日期」
+- min：string —— 最早可选日期（含，YYYY-MM-DD）；更早的日置灰不可点
+- max：string —— 最晚可选日期（含，YYYY-MM-DD）；更晚的日置灰不可点
+- disabled：boolean | Signal<boolean> —— 禁用触发器
+- onChange：(date: string) => void —— 选中回调（点击日期或 Enter）
+
+示例：
+
+```
+datePicker({ value: dateVal, min: '2026-10-20', max: '2026-10-31', onChange: (d) => toast.success(d) })
+```
+
+手把手：
+
+1. 点触发器展开当月网格，打开时视图自动对准已选日期（无选中则今天）
+2. ‹ › 翻月，底部「今天」一键跳今天并提交；今天用描边标记、选中用实心底色
+3. 键盘：←→ 逐日、↑↓ 逐周、PageUp/PageDown 逐月、Enter 提交，跨月会自动翻页
+4. min / max 为闭区间，越界日期置灰不可点也不可键盘选中
+5. value 传信号即受控；Esc 收起（与弹窗/抽屉共用逐层关闭栈）
+
+现场演示：apps/docs/demo.html#sec-datepicker
+
 API 速览：
 
 - button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用；type 缺省 button（表单内不隐式提交）
@@ -1336,6 +1363,7 @@ API 速览：
 - cascader(props)：级联选择，多列联动面板（悬停下钻 / 点击提交），value 为路径数组信号，changeOnSelect 允许停在中间层，全键盘可操作
 - splitter(props)：可拖拽分栏容器，分隔条支持指针拖拽 / 方向键微调 / 双击复位，sizes 为百分比数组信号
 - autoComplete(props)：输入联想，输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起，options 可传函数做远程联想
+- datePicker(props)：日期选择，单月网格 + 翻月 / 今天快捷键，value 为 YYYY-MM-DD 信号，min/max 闭区间限制，方向键逐日逐周可导航
 
 一行用法：
 

llms.txt

@@ -97,6 +97,7 @@
   - cascader(props)：级联选择，多列联动面板（悬停下钻 / 点击提交），value 为路径数组信号，changeOnSelect 允许停在中间层，全键盘可操作
   - splitter(props)：可拖拽分栏容器，分隔条支持指针拖拽 / 方向键微调 / 双击复位，sizes 为百分比数组信号
   - autoComplete(props)：输入联想，输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起，options 可传函数做远程联想
+  - datePicker(props)：日期选择，单月网格 + 翻月 / 今天快捷键，value 为 YYYY-MM-DD 信号，min/max 闭区间限制，方向键逐日逐周可导航
 - 用法: `const checked = signal(false); checkbox({ label: '同意', checked }); const open = signal(false); modal({ title: '确认', open }, '内容')`
 - 约定: 皮肤不持有业务状态，一律委托 headless 内核或调用方信号
 - 约定: 表单类组件统一约定：*Props.value/checked/active 为 Signal 双向绑定，onChange/onInput 为回调

packages/skin/ui/src/datePicker.ts

@@ -0,0 +1,150 @@
+import { effect, h, signal } from '@ui-arch/frame';
+import type { Signal } from '@ui-arch/frame';
+import { pushOverlay } from './overlay.js';
+import { flip } from './position.js';
+import type { DatePickerProps } from './types.js';
+
+const pad = (n: number): string => String(n).padStart(2, '0'); // 两位补零
+const fmt = (y: number, m: number, d: number): string => `${y}-${pad(m + 1)}-${pad(d)}`; // 拼成 YYYY-MM-DD
+const parse = (s: string): [number, number, number] | null => {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
+  return m ? [Number(m[1]), Number(m[2]) - 1, Number(m[3])] : null; // 非法串返回 null，调用方回落到今天
+};
+const today = (): [number, number, number] => {
+  const d = new Date();
+  return [d.getFullYear(), d.getMonth(), d.getDate()];
+};
+const shiftDay = (key: string, delta: number): string => {
+  const p = parse(key) ?? today();
+  const d = new Date(p[0], p[1], p[2] + delta);
+  return fmt(d.getFullYear(), d.getMonth(), d.getDate());
+};
+
+/*** 日期选择：单月网格 + 上下月翻页 + 今天快捷键，value 信号双向绑定，方向键/PageUp/PageDown 可导航 ***/ 
+export function datePicker(props: DatePickerProps): HTMLElement {
+  // —— 状态集中声明 ——
+  const value: Signal<string> = props.value ?? signal(''); // 已选日期
+  const open = signal(false);                             // 弹层开合
+  const place = signal<'top' | 'bottom'>('bottom');       // 实际方位
+  const initial = parse(value()) ?? today();              // 初始视图：跟随已选，否则今天
+  const view = signal<[number, number]>([initial[0], initial[1]]); // 当前展示的年月
+  const focus = signal<string>(value() || fmt(...today()));        // 键盘焦点日
+  let releaseEsc: (() => void) | null = null;             // Esc 栈注销函数
+
+  const grid = h('div', { class: 'ua-datepicker-grid', role: 'grid' }) as HTMLElement;
+  const label = h('span', { class: 'ua-datepicker-label' }) as HTMLElement;
+  const head = h(
+    'div',
+    { class: 'ua-datepicker-head' },
+    h('button', { type: 'button', class: 'ua-datepicker-nav', 'aria-label': '上一月', onClick: () => turn(-1) }, '‹'),
+    label,
+    h('button', { type: 'button', class: 'ua-datepicker-nav', 'aria-label': '下一月', onClick: () => turn(1) }, '›'),
+  );
+  const pop = h(
+    'div',
+    { class: () => `ua-datepicker-pop${open() ? ' ua-open' : ''}${place() === 'top' ? ' is-flip' : ''}` },
+    head,
+    h('div', { class: 'ua-datepicker-week' }, ...['日', '一', '二', '三', '四', '五', '六'].map((w) => h('span', {}, w))),
+    grid,
+    h('div', { class: 'ua-datepicker-foot' }, h('button', { type: 'button', class: 'ua-datepicker-today', onClick: () => commit(fmt(...today())) }, '今天')),
+  ) as HTMLElement;
+
+  /*** 翻月：只改视图，不改已选值；跨年自动进位 ***/
+  function turn(delta: number): void {
+    const [y, m] = view();
+    const d = new Date(y, m + delta, 1);
+    view([d.getFullYear(), d.getMonth()]);
+  }
+
+  /*** 提交：写值 + 回调 + 收起 + 焦点归还触发器 ***/
+  function commit(date: string): void {
+    value(date);
+    props.onChange?.(date);
+    open(false);
+    trigger.focus();
+  }
+
+  /*** 是否越界：min / max 为闭区间，缺省视为不限制 ***/
+  const outOfRange = (date: string): boolean => (props.min ? date < props.min : false) || (props.max ? date > props.max : false);
+
+  /*** 重绘网格：前置空位对齐星期、今天/选中/焦点分别打标 ***/
+  function render(): void {
+    const [y, m] = view();
+    const lead = new Date(y, m, 1).getDay();              // 当月 1 号是周几
+    const total = new Date(y, m + 1, 0).getDate();        // 当月天数
+    const cells: HTMLElement[] = [];
+    for (let i = 0; i < lead; i++) cells.push(h('span', { class: 'ua-datepicker-blank' })); // 月初留白
+    for (let d = 1; d <= total; d++) {
+      const date = fmt(y, m, d);
+      const dead = outOfRange(date);
+      const cls = `ua-datepicker-day${date === value() ? ' is-selected' : ''}${date === fmt(...today()) ? ' is-today' : ''}${dead ? ' is-disabled' : ''}`;
+      cells.push(
+        h('button', {
+          type: 'button',
+          class: cls,
+          role: 'gridcell',
+          tabindex: date === focus() ? '0' : '-1', // 漫游 tabindex：只有焦点日可 Tab 进入
+          'aria-selected': String(date === value()),
+          disabled: dead,
+          'aria-label': date,
+          onClick: () => commit(date),
+        }, String(d)),
+      );
+    }
+    grid.replaceChildren(...cells);
+    label.textContent = `${y} 年 ${m + 1} 月`;
+    requestAnimationFrame(() => {
+      if (!open()) return; // 卫语句：收起时不抢焦点
+      (grid.querySelector('.ua-datepicker-day[tabindex="0"]') as HTMLElement | null)?.focus();
+    });
+  }
+
+  const trigger = h(
+    'button',
+    {
+      type: 'button',
+      class: 'ua-datepicker-trigger',
+      'aria-haspopup': 'dialog',
+      'aria-expanded': () => String(open()),
+      disabled: props.disabled,
+      onClick: () => {
+        if (!open()) {
+          const p = parse(value()) ?? today(); // 打开时视图对准已选日期（无选则今天）
+          view([p[0], p[1]]);
+          focus(value() || fmt(...p));
+        }
+        open(!open());
+      },
+    },
+    h('span', { class: () => `ua-datepicker-value${value() ? '' : ' is-empty'}` }, () => value() || props.placeholder || '请选择日期'),
+    h('span', { class: 'ua-datepicker-caret', 'aria-hidden': 'true' }, '▤'),
+  );
+  const root = h('div', { class: () => `ua-datepicker${open() ? ' ua-open' : ''}` }, trigger, pop) as HTMLElement;
+
+  // 键盘：←→ 逐日、↑↓ 逐周、PageUp/PageDown 逐月、Enter 提交，Esc 交给弹层栈
+  pop.addEventListener('keydown', (e: KeyboardEvent) => {
+    const step: Record<string, number> = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
+    if (step[e.key]) {
+      e.preventDefault();
+      const next = shiftDay(focus(), step[e.key]);
+      const p = parse(next) ?? today();
+      focus(next);
+      if (p[0] !== view()[0] || p[1] !== view()[1]) view([p[0], p[1]]); // 跨月自动翻页
+      render();
+      return;
+    }
+    if (e.key === 'PageUp' || e.key === 'PageDown') { e.preventDefault(); turn(e.key === 'PageUp' ? -1 : 1); return; }
+    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (!outOfRange(focus())) commit(focus()); }
+  });
+  document.addEventListener('click', (e) => {
+    if (root.contains(e.target as Node)) return; // 卫语句：组件内点击不处理
+    open(false);
+  });
+  effect(render); // 依赖 view / value / focus
+  effect(() => {
+    if (open()) releaseEsc ??= pushOverlay(() => { open(false); trigger.focus(); }); // 入栈逐层关闭
+    else { releaseEsc?.(); releaseEsc = null; }
+  });
+  effect(() => { if (open()) place(flip(trigger, pop, 'bottom')); }); // 空间不足自动翻转
+  return root;
+}

packages/skin/ui/src/index.ts

@@ -48,3 +48,4 @@ export { transfer } from './transfer.js';
 export { cascader } from './cascader.js';
 export { splitter } from './splitter.js';
 export { autoComplete } from './autoComplete.js';
+export { datePicker } from './datePicker.js';

packages/skin/ui/src/types.ts

@@ -541,4 +541,14 @@ export interface AutoCompleteProps {
   onSelect?: (option: AutoCompleteOption) => void; // 选中回调（点击或 Enter）
 }
 
+/*** 日期选择入参 ***/
+export interface DatePickerProps {
+  value?: Signal<string>;                 // 选中日期（YYYY-MM-DD）；不传则内部维护
+  placeholder?: string;                   // 未选时占位文案；缺省「请选择日期」
+  min?: string;                           // 最早可选日期（含）；早于此的日置灰
+  max?: string;                           // 最晚可选日期（含）；晚于此的日置灰
+  disabled?: boolean | Signal<boolean>;   // 禁用触发器
+  onChange?: (date: string) => void;      // 选中回调（点击或 Enter）
+}
+
 export type { ColumnDef, RowKey }; // 再导出常用内核类型，方便调用方

packages/skin/ui/ua.manifest.json

@@ -62,7 +62,8 @@
       "transfer(props)：穿梭框，左右两栏勾选后整体搬运，targetKeys 信号双向绑定，两栏各自搜索与全选（含半选），禁用条目不参与搬运也不可勾选",
       "cascader(props)：级联选择，多列联动面板（悬停下钻 / 点击提交），value 为路径数组信号，changeOnSelect 允许停在中间层，全键盘可操作",
       "splitter(props)：可拖拽分栏容器，分隔条支持指针拖拽 / 方向键微调 / 双击复位，sizes 为百分比数组信号",
-      "autoComplete(props)：输入联想，输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起，options 可传函数做远程联想"
+      "autoComplete(props)：输入联想，输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起，options 可传函数做远程联想",
+      "datePicker(props)：日期选择，单月网格 + 翻月 / 今天快捷键，value 为 YYYY-MM-DD 信号，min/max 闭区间限制，方向键逐日逐周可导航"
     ],
     "keyTypes": [
       "ButtonProps",
@@ -2123,6 +2124,51 @@
           "options 传函数时每次输入都会用当前关键字调用，可在此发起远程请求并返回新数组",
           "value 传信号即受控：外部写入会同步回填输入框内容"
         ]
+      },
+      {
+        "id": "datePicker",
+        "title": "日期选择 DatePicker",
+        "demo": "sec-datepicker",
+        "props": [
+          {
+            "n": "value",
+            "t": "Signal<string>",
+            "d": "选中日期（YYYY-MM-DD）信号；不传则内部维护"
+          },
+          {
+            "n": "placeholder",
+            "t": "string",
+            "d": "未选时占位文案；缺省「请选择日期」"
+          },
+          {
+            "n": "min",
+            "t": "string",
+            "d": "最早可选日期（含，YYYY-MM-DD）；更早的日置灰不可点"
+          },
+          {
+            "n": "max",
+            "t": "string",
+            "d": "最晚可选日期（含，YYYY-MM-DD）；更晚的日置灰不可点"
+          },
+          {
+            "n": "disabled",
+            "t": "boolean | Signal<boolean>",
+            "d": "禁用触发器"
+          },
+          {
+            "n": "onChange",
+            "t": "(date: string) => void",
+            "d": "选中回调（点击日期或 Enter）"
+          }
+        ],
+        "example": "datePicker({ value: dateVal, min: '2026-10-20', max: '2026-10-31', onChange: (d) => toast.success(d) })",
+        "steps": [
+          "点触发器展开当月网格，打开时视图自动对准已选日期（无选中则今天）",
+          "‹ › 翻月，底部「今天」一键跳今天并提交；今天用描边标记、选中用实心底色",
+          "键盘：←→ 逐日、↑↓ 逐周、PageUp/PageDown 逐月、Enter 提交，跨月会自动翻页",
+          "min / max 为闭区间，越界日期置灰不可点也不可键盘选中",
+          "value 传信号即受控；Esc 收起（与弹窗/抽屉共用逐层关闭栈）"
+        ]
       }
     ]
   }

packages/skin/ui/ui.css

@@ -2809,3 +2809,157 @@ button.ua-step-dot:hover {
   .ua-autocomplete-input,
   .ua-autocomplete-opt { transition: none; }
 }
+.ua-datepicker {
+  position: relative;
+  display: inline-block;
+  min-width: 200px;
+}
+.ua-datepicker-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ua-space-1);
+  width: 100%;
+  padding: 8px var(--ua-space-2);
+  font-size: var(--ua-font-size-sm);
+  color: var(--ua-color-text);
+  background: var(--ua-color-surface);
+  border: 1px solid var(--ua-color-border);
+  border-radius: var(--ua-radius-sm);
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.ua-datepicker-trigger:hover {
+  border-color: var(--ua-color-accent);
+}
+.ua-datepicker-trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.ua-datepicker.ua-open .ua-datepicker-trigger {
+  border-color: var(--ua-color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 18%, transparent);
+}
+.ua-datepicker-value.is-empty {
+  color: var(--ua-color-text-muted);
+}
+.ua-datepicker-caret {
+  font-size: 11px;
+  color: var(--ua-color-text-muted);
+}
+.ua-datepicker-pop {
+  position: absolute;
+  z-index: 40;
+  display: none;
+  width: 264px;
+  margin-top: 6px;
+  padding: var(--ua-space-2);
+  border: 1px solid var(--ua-color-border);
+  border-radius: var(--ua-radius-md);
+  background: var(--ua-color-surface);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
+}
+.ua-datepicker-pop.ua-open {
+  display: block;
+  animation: ua-dp-in 0.15s ease both;
+}
+.ua-datepicker-pop.is-flip {
+  margin-top: 0;
+  margin-bottom: 6px;
+}
+.ua-datepicker-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ua-space-1);
+  margin-bottom: var(--ua-space-1);
+}
+.ua-datepicker-label {
+  font-size: var(--ua-font-size-sm);
+  font-weight: 600;
+  color: var(--ua-color-text);
+}
+.ua-datepicker-nav {
+  width: 24px;
+  height: 24px;
+  font-size: 14px;
+  line-height: 1;
+  color: var(--ua-color-text);
+  background: transparent;
+  border: 1px solid var(--ua-color-border);
+  border-radius: var(--ua-radius-sm);
+  cursor: pointer;
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+.ua-datepicker-nav:hover {
+  color: var(--ua-color-accent);
+  border-color: var(--ua-color-accent);
+}
+.ua-datepicker-week {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  font-size: var(--ua-font-size-sm);
+  color: var(--ua-color-text-muted);
+  text-align: center;
+}
+.ua-datepicker-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+  margin-top: 2px;
+}
+.ua-datepicker-blank {
+  height: 28px;
+}
+.ua-datepicker-day {
+  height: 28px;
+  font-size: var(--ua-font-size-sm);
+  color: var(--ua-color-text);
+  background: transparent;
+  border: none;
+  border-radius: var(--ua-radius-sm);
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.ua-datepicker-day:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
+}
+.ua-datepicker-day.is-today {
+  box-shadow: inset 0 0 0 1px var(--ua-color-accent);
+}
+.ua-datepicker-day.is-selected {
+  color: var(--ua-color-accent-contrast);
+  background: var(--ua-color-accent);
+  font-weight: 600;
+}
+.ua-datepicker-day:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+.ua-datepicker-day:focus-visible {
+  outline: 2px solid var(--ua-color-accent);
+  outline-offset: -2px;
+}
+.ua-datepicker-foot {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--ua-space-1);
+}
+.ua-datepicker-today {
+  padding: 4px var(--ua-space-1);
+  font-size: var(--ua-font-size-sm);
+  color: var(--ua-color-accent);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+@keyframes ua-dp-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ua-datepicker-pop.ua-open { animation: none; }
+  .ua-datepicker-trigger,
+  .ua-datepicker-day,
+  .ua-datepicker-nav { transition: none; }
+}