DatePicker

DatePicker 组件,源码位于 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]。