组件功能
日期选择组件,用于在表单中选择单个日期,支持日期范围限制、清空操作以及多种样式配置。
基础用法
通过 name 与表单字段绑定,点击输入框即可弹出日期面板进行选择。
Template 示例:
<DatePicker name="birthday" placeholder="请选择出生日期" />
效果展示如下:


选择日期后,效果展示如下:


属性说明
属性名 | 类型 | 描述 | 默认值 |
name ★ | string | 表单字段名称 | - |
onChangeAction | ActionConfig | 日期变化时触发的动作 | - |
placeholder | string | 未选择日期时的占位文本 | - |
defaultValue | string | 默认值 (ISO 日期格式) | - |
min | string | 最小日期 (ISO 日期格式) | - |
max | string | 最大日期 (ISO 日期格式) | - |
variant | "solid" | "soft" | "outline" | "ghost" | 视觉样式 | "outline" |
size | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | 组件尺寸 | "md" |
side | "top" | "bottom" | "left" | "right" | 日期面板弹出方向 | "bottom" |
align | "start" | "center" | "end" | 日期面板对齐方式 | "start" |
pill | boolean | 是否为胶囊形状 | false |
block | boolean | 是否为块级元素 | false |
clearable | boolean | 是否显示清空按钮 | false |
disabled | boolean | 是否禁用 | false |
注意:
★ 标记为必填属性。
日期格式说明
日期相关属性(defaultValue、min、max)均使用 ISO 8601 格式。
仅日期:"2024-12-26"。
日期时间:"2024-12-26T10:30:00Z"。