DatePicker 日期选择器
规则
年月日选择
js
{
type: 'datePicker',
title: '年月日选择',
field: 'date',
value: '2024-06-12',
props: {
title: '年月日选择',
}
}
年月选择
js
{
type: 'datePicker',
title: '年月选择',
field: 'date2',
value: '2024-06',
props: {
title: '年月选择',
columnsType: ['year', 'month']
}
}
年选择
js
{
type: 'datePicker',
title: '年选择',
field: 'date3',
value: '2024',
props: {
title: '年选择',
columnsType: ['year'],
}
}
月日选择
js
{
type: 'datePicker',
title: '月日选择',
field: 'date4',
value: '06-12',
props: {
title: '月日选择',
columnsType: ['month', 'day'],
}
},
value: String
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
disabled | 是否禁用 | boolean | false |
columns-type | 选项类型,由 year 、month 和 day 组成的数组 | string[] | ['year', 'month', 'day'] |
min-date | 可选的最小时间,精确到日 | Date | 十年前 |
max-date | 可选的最大时间,精确到日 | Date | 十年后 |
title | 顶部栏标题 | string | '' |
confirm-button-text | 确认按钮文字 | string | 确认 |
cancel-button-text | 取消按钮文字 | string | 取消 |
show-toolbar | 是否显示顶部栏 | boolean | true |
loading | 是否显示加载状态 | boolean | false |
readonly | 是否为只读状态,只读状态下无法切换选项 | boolean | false |
filter | 选项过滤函数 | (type: string, options: PickerOption[]) => PickerOption[] | - |
formatter | 选项格式化函数 | (type: string, option: PickerOption) => PickerOption | - |
option-height | 选项高度,支持 px vw vh rem 单位,默认 px | number | string | 44 |
visible-option-num | 可见的选项个数 | number | string | 6 |
swipe-duration | 快速滑动时惯性滚动的时长,单位 ms | number | string | 1000 |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
confirm | 点击完成按钮时触发 | { selectedValues, selectedOptions, selectedIndexes } |
cancel | 点击取消按钮时触发 | { selectedValues, selectedOptions, selectedIndexes } |
change | 选项改变时触发 | { selectedValues, selectedOptions, selectedIndexes, columnIndex } |