Skip to content

DatePicker 日期选择器

基础使用

选择单独一天,通过 valuev-model:value 属性绑定。格式为 YYYY-MM-DD

选择范围

通过设置 range 属性为 true,可开启选择时间范围功能。相应的绑定的 value 值类型也需要变成 Array

TIP

绑定值类型为 [string, string]

多选日期

通过设置 multiple 属性为 true,可开启多日期选择功能。选择复数日期时,面板上的时间会进行折叠。相应的绑定的 value 值类型也需要变成 Array

TIP

绑定值类型为 string[]

布局调整

rounded 属性控制已选的日期范围样式是否为圆角;desktop 属性控制日期选中面板是否为简约风格;landscape 控制面板标题是否为垂直样式,仅在 desktop: false 下有效。

范围限制

设置 minmax 属性可以限制日期的选择范围。需要传入符合日期的字符串,例如 2020-10-06。可以对日进行缺省,系统会自动识别成该月的最后一天,可以减少开发人员进一步的计算,例如 2020-10,会识别出 2020-10-31

DatePicker API

属性

属性名说明类型默认值是否必填
value绑定值String/Array-No
max可选范围的最早日期String-No
min可选范围的最晚日期String-No
range时间范围选择功能BooleanfalseNo
multiple时间多选功能BooleanfalseNo
rounded选中日期是否为圆角样式BooleanfalseNo
desktop是否为桌面风格BooleanfalseNo
landscape是否为横版风格,在 desktop 属性下有效BooleanfalseNo