Date Range Picker 日期选择器

type : 'date-range-picker'

日期选择器，用于选择年、月、日范围

代码演示

date-range-picker 是基于 date-picker 开发，因此其 API 与 date-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({
    day: ['2025-06-23', '2025-12-31'],
    month1: ['2025-06', '2025-12'],
});
const formOptions = ref([
    {
        type: 'date-range-picker',
        label: '日期范围',
        name: 'day',
        attrs: {
            startProps: {
                minDate: new Date(2020, 0, 1),
                maxDate: new Date(2025, 11, 31),
                filter: (type, options) => {
                    if (type === 'month') {
                        return options.filter((option) => Number(option.value) % 6 === 0);
                    }
                    return options;
                }
            },
            endProps: {
                minDate: new Date(2024, 0, 1),
                maxDate: new Date(2035, 11, 31),

            },
            formatter: (type, option) => {
                if (type === 'year') {
                    option.text += '年';
                }
                if (type === 'month') {
                    option.text += '月';
                }
                if (type === 'day') {
                    option.text += '日';
                }
                return option;
            },
            // 'column-type':['year', 'month', 'day']
        }
    },
    {
        type: 'date-range-picker',
        label: '年月范围',
        name: 'month1',
        attrs: {
            'columnsType': ['year', 'month']
        }
    },
    {
        type: 'date-range-picker',
        label: '月日范围',
        name: 'month2',
        attrs: {
            'columnsType': ['month', 'day'],
        }
    },
    {
        type: 'date-range-picker',
        label: '月分范围',
        name: 'month',
        attrs: {
            'columnsType': ['month']
        }
    },
    {
        type: 'date-range-picker',
        label: '年份范围',
        name: 'year',
        attrs: {
            'columnsType': ['year']
        }
    },
]);

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

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