DatePicker 日期选择

最近更新时间:2025-12-30 17:25:52

我的收藏

组件功能

日期选择组件,用于在表单中选择单个日期,支持日期范围限制、清空操作以及多种样式配置。

基础用法

通过 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"。