Skip to content

DatePicker 日期选择器

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'],
    }
},

参考:Vant_DatePicker

value: String

Props

参数说明类型默认值
disabled是否禁用booleanfalse
columns-type选项类型,由 yearmonthday 组成的数组string[]['year', 'month', 'day']
min-date可选的最小时间,精确到日Date十年前
max-date可选的最大时间,精确到日Date十年后
title顶部栏标题string''
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
show-toolbar是否显示顶部栏booleantrue
loading是否显示加载状态booleanfalse
readonly是否为只读状态,只读状态下无法切换选项booleanfalse
filter选项过滤函数(type: string, options: PickerOption[]) => PickerOption[]-
formatter选项格式化函数(type: string, option: PickerOption) => PickerOption-
option-height选项高度,支持 px vw vh rem 单位,默认 pxnumber | string44
visible-option-num可见的选项个数number | string6
swipe-duration快速滑动时惯性滚动的时长,单位 msnumber | string1000

Events

事件名说明回调参数
confirm点击完成按钮时触发{ selectedValues, selectedOptions, selectedIndexes }
cancel点击取消按钮时触发{ selectedValues, selectedOptions, selectedIndexes }
change选项改变时触发{ selectedValues, selectedOptions, selectedIndexes, columnIndex }

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用