DatePicker 日期选择器
基础使用
选择单独一天,通过 value
或 v-model:value
属性绑定。格式为 YYYY-MM-DD
选择范围
通过设置 range
属性为 true
,可开启选择时间范围功能。相应的绑定的 value
值类型也需要变成 Array
。
TIP
绑定值类型为 [string, string]
多选日期
通过设置 multiple
属性为 true
,可开启多日期选择功能。选择复数日期时,面板上的时间会进行折叠。相应的绑定的 value
值类型也需要变成 Array
。
TIP
绑定值类型为 string[]
布局调整
rounded
属性控制已选的日期范围样式是否为圆角;desktop
属性控制日期选中面板是否为简约风格;landscape
控制面板标题是否为垂直样式,仅在 desktop: false
下有效。
范围限制
设置 min
、max
属性可以限制日期的选择范围。需要传入符合日期的字符串,例如 2020-10-06
。可以对日进行缺省,系统会自动识别成该月的最后一天,可以减少开发人员进一步的计算,例如 2020-10
,会识别出 2020-10-31
。
DatePicker API
属性
属性名 | 说明 | 类型 | 默认值 | 是否必填 |
---|---|---|---|---|
value | 绑定值 | String/Array | - | No |
max | 可选范围的最早日期 | String | - | No |
min | 可选范围的最晚日期 | String | - | No |
range | 时间范围选择功能 | Boolean | false | No |
multiple | 时间多选功能 | Boolean | false | No |
rounded | 选中日期是否为圆角样式 | Boolean | false | No |
desktop | 是否为桌面风格 | Boolean | false | No |
landscape | 是否为横版风格,在 desktop 属性下有效 | Boolean | false | No |