DatePicker 日期选择器

规则

年月日选择

{
    type: 'datePicker',
    title: '年月日选择',
    field: 'date',
    value: '2024-06-12',
    props: {
        title: '年月日选择',
    }
}

年月选择

{
    type: 'datePicker',
    title: '年月选择',
    field: 'date2',
    value: '2024-06',
    props: {
        title: '年月选择',
        columnsType: ['year', 'month']
    }
}

年选择

 {
    type: 'datePicker',
    title: '年选择',
    field: 'date3',
    value: '2024',
    props: {
        title: '年选择',
        columnsType: ['year'],
    }
}

月日选择

 {
    type: 'datePicker',
    title: '月日选择',
    field: 'date4',
    value: '06-12',
    props: {
        title: '月日选择',
        columnsType: ['month', 'day'],
    }
},

参考:Vant_DatePicker (opens new window)

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 }