Datetime Range Picker 日期时间范围选择器

type : 'datetime-range-picker'

日期时间范围选择器。用于选择一组具体的时间范围。

代码演示

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

<template>
    <x-form ref="formRef" label-align="top" :model="formValue" :items="formOptions" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({
    datetime1: ['2023-10-01 12:00:00', '2023-10-02 14:30:00'],
    datetime2: [['2023','10','01','12','00'], ['2023','10','02']],
});
const formOptions = ref([
    {
        type: 'datetime-range-picker',
        label: 'datetime',
        name: 'datetime1',
        required: true,
        attrs:{
            minYear:2000,
            maxYear:2030,
        }
    },
    {
        type: 'datetime-range-picker',
        label: 'datetime2',
        name: 'datetime2',
        required: true,
        attrs:{
            'columnsType':['year', 'month', 'day', 'hour', 'minute'],
        }
    },
    {
        label: 'datetime3',
        type: 'datetime-range-picker',
        name: 'datetime3',
        required: true,
        attrs:{
            formatter: (type, option) => {
                    if (type === 'year') {
                        option.text += '年';
                    }
                    if (type === 'month') {
                        option.text += '月';
                    }
                    if (type === 'day') {
                        option.text += '日';
                    }
                      if (type === 'hour') {
                    option.text += '时';
                }
                if (type === 'minute') {
                    option.text += '分';
                }
                if (type === 'second') {
                    option.text += '秒';
                }
                    return option;
                },
        }
    },
]);
</script>
<style lang="scss" scoped></style>

用法展示

API

Props

参数	说明	类型	默认值
startProps	开始日期时间配置参数	object	-
endProps	结束日期时间配置参数	object	-
columnsType	选项类型，由year、month 、day 、hour、minute 、second 组成的数组	string[]	['year', 'month', 'day', 'hour', 'minute', 'second']

Events