Skip to content

TimePicker 时间选择器

timePicker

规则

时间选择

js
{
    type: 'timePicker',
    title: '时间选择',
    field: 'time',
    value: '12:47',
    props: {
        title: '时间选择',
    }
}

时分秒选择

js


{
    type: 'timePicker',
    title: '时分秒选择',
    field: 'time',
    value: '12:47:58',
    props: {
        title: '时分秒选择',
        columnsType: ['hour', 'minute', 'second']
    }
}

小时选择

js
{
    type: 'timePicker',
    title: '小时选择',
    field: 'time',
    value: '12',
    props: {
        title: '小时选择',
        columnsType: ['hour']
    }
}

分钟选择

js
{
    type: 'timePicker',
    title: '分钟选择',
    field: 'time',
    value: '58',
    props: {
        title: '分钟选择',
        columnsType: ['minute']
    }
}

参考:Vant_TimePicker

value :String

Props

参数说明类型默认值
disabled是否禁用booleanfalse
columns-type选项类型,由 hourminutesecond 组成的数组string[]['hour', 'minute']
min-hour可选的最小小时number | string0
max-hour可选的最大小时number | string23
min-minute可选的最小分钟number | string0
max-minute可选的最大分钟number | string59
min-second可选的最小秒数number | string0
max-second可选的最大秒数number | string59
min-time可选的最小时间,格式参考 07:40:00,使用时 min-hour min-minute min-second 不会生效string-
max-time可选的最大时间,格式参考 10:20:00,使用时 max-hour max-minute max-second 不会生效string-
title顶部栏标题string''
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
show-toolbar是否显示顶部栏booleantrue
loading是否显示加载状态booleanfalse
readonly是否为只读状态,只读状态下无法切换选项booleanfalse
filter选项过滤函数(type: string, options: PickerOption[], values: string[]) => 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 许可证发布,欢迎个人和企业用户免费使用