Time Range Picker 时间范围选择器

type : 'time-range-picker'

时间范围选择器，用于选择时、分、秒范围。

代码演示

time-range-picker 是基于 time-picker 组件进行封装的，因此其 API 与 time-picker 一致，可以同时在attrs 同时配置开始和结束的选择器属性，也可通过startProps 和 endProps 分别配置开始和结束的选择器属性。

<template>
    <x-form ref="formRef" label-align="top" :model="formValue" :items="formOptions" />
    <div style="margin:10px">
        <van-button @click="onSubmit" block type="primary">验证</van-button>
    </div>
</template>

<script lang="ts" setup>
import { ref, } from 'vue';
const formRef = ref();
const formValue = ref({
    time1: ['12:40:10', '20:20:50'],
    time2: [[11, 10], [12, 59]],
});
const formOptions = ref([
    {
        type: 'time-range-picker',
        label: '时分秒范围',
        name: 'time1',
        attrs: {
            startProps: {
                minTime: '09:40:10',
                maxTime: '20:20:50',
                filter: (type, options) => {
                    if (type === 'minute') {
                        return options.filter((option) => Number(option.value) % 10 === 0);
                    }
                    return options;
                }
            },
            endProps: {
                formatter: (type, option) => {
                    if (type === 'hour') {
                        option.text += 'h';
                    }
                    if (type === 'minute') {
                        option.text += 'm';
                    }
                    if (type === 'second') {
                        option.text += 's';
                    }
                    return option;
                },
            },
            'visible-option-num': 4,
            formatter: (type, option) => {
                if (type === 'hour') {
                    option.text += '时';
                }
                if (type === 'minute') {
                    option.text += '分';
                }
                if (type === 'second') {
                    option.text += '秒';
                }
                return option;
            },
            // 'column-type':['year', 'month', 'day']
        }
    },
    {
        type: 'time-range-picker',
        label: '时分范围',
        name: 'time2',
        attrs: {
            'columnsType': ['hour', 'minute'],
            startProps: {
                minHour: '8',
                maxHour: '12',
                minMinute: '10',
                maxMinute: '59',
            },
            endProps: {
                minHour: '14',
                maxHour: '20',
                minMinute: '02',
                maxMinute: '43',
            }
        }
    },
    {
        type: 'time-range-picker',
        label: '分秒',
        name: 'time3',
        attrs: {
            'columnsType': ['minute', 'second'],
        }
    },
    {
        type: 'time-range-picker',
        label: '小时范围',
        name: 'time4',
        attrs: {
            'columnsType': ['hour']
        }
    },
    {
        type: 'time-range-picker',
        label: '分钟范围',
        name: 'time5',
        required: true,
        attrs: {
            'columnsType': ['minute'],
            startProps: {
                formatter: (type, option) => {
                    if (type === 'hour') {
                        option.text += 'h';
                    }
                    if (type === 'minute') {
                        option.text += 'm';
                    }
                    if (type === 'second') {
                        option.text += 's';
                    }
                    return option;
                },
            },
            endProps: {
            },
            formatter: (type, option) => {
                if (type === 'hour') {
                    option.text += '时';
                }
                if (type === 'minute') {
                    option.text += '分';
                }
                if (type === 'second') {
                    option.text += '秒';
                }
                return option;
            },
        }
    },
]);

const onSubmit = () => {
    formRef.value?.validate().then(() => {
        console.log('submit values =', formValue.value);
    }).catch((error: any) => {
        console.log('error', error);
    })
}
</script>
<style lang="scss" scoped></style>

用法展示

API

Props

除 startProp 和 endProps 外，其余配置与官方组件 time-picker 参数保持一致。这里以展示新增属性配置为主。

参数	说明	类型	默认值
startProps	开始时间配置参数，配置与官方组件time-picker 参数保持一致	object	-
endProps	结束时间配置参数，配置与官方组件time-picker 参数保持一致	object	-

Events