一、基础用法
通过 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"。