日期选择

已上架

日期选择组件,源码位于 components/ui/date-picker.tsx。以下示例为组件库源码的构建期真实渲染。

样式变体

边框式(默认)Outlined (default)

DatePicker 默认以输入型按钮呈现,填满父容器并消费控件 token。

状态变体

正常Normal

单日期字段使用 yyyy-MM-dd 值格式。

悬浮Hover

示例固定展示 hover 边框;真实组件 hover 时自动进入该状态。

点击Click / focus

点击后触发器进入 focus/open 边框;示例固定展示 active 控件边框。

禁用Disabled

禁用态消费 --color-disabled-*,不可打开面板。

校验失败Invalid

错误态使用 aria-invalid,表单文案由 Field/Form 层承载。

请选择截止日期。

受约束日期Constrained dates

minDate / maxDate / disabledDate 会把不可选日期渲染为禁用格,并阻止点击选择。

形态变体

可清空Clearable

allowClear 在已有值时显示清空 affordance,清空后回到 placeholder。

日期时间Date time

showTime 开启后,值格式为 yyyy-MM-ddTHH:mm,并在面板底部确认。

自定义触发器Custom trigger

行内表格或紧凑列表可传入 trigger,仍由 PopoverTrigger 管理打开行为。

日期范围Date range

范围筛选使用 DateRangePicker,不要在业务页随手拼两个裸 DatePicker。

至

任务截止日Task deadline

任务、排程和过滤器里的单日期字段优先使用 DatePicker,而非原生 input[type=date]。

下架组件

确认后生成下架提示词。权威在 Registry,设计站不直接改清单;对外构建不会展示已下架入口。

更新组件

选择对标资源并描述需求,生成给 Agent / Distiller 的更新提示词(复制后发送)。不在站点内直接改真源。

对标设计系统

升为 Stable

对照验收契约列出缺口。能自动补的由 Agent/脚本补齐;未绿前不得把状态标成 stable。

当前缺口
  • 缺少验收契约草稿(acceptance-contract)
  • 未声明基础样式 / 状态矩阵 / 场景示例覆盖
  • 轻量门与 code↔preview 门均未接线