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]。