antd限制开始时间与结束时间范围是30天,并不能选择当前日期之后的日期 vue3(默认展示近7天)

发布时间 2023-09-05 16:17:23作者: 稳住别慌
            <a-range-picker
                :value="hackValue || dateArr"
                :disabled-date="disabledDate"
                style="width: 240px"
                separator="~"
                :allow-clear="false"
                @change="onChange"
                @openChange="onOpenChange"
                @calendarChange="onCalendarChange"
            />

type RangeValue = [Dayjs, Dayjs];

let dateArr = ref<RangeValue>([
    dayjs(dayjs().subtract(7, 'day')),
    dayjs(dayjs()),
]);


const dates = ref<RangeValue>();
const hackValue = ref<RangeValue>();

const disabledDate = (current: Dayjs) => {
    if (!dates.value || (dates.value as any).length === 0) {
        return current && current > dayjs().endOf('day');
    }
    const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 30;
    const tooEarly =
        dates.value[1] && dates.value[1].diff(current, 'days') > 30;
    return tooEarly || tooLate || current > dayjs().endOf('day');
};
const onOpenChange = (open: boolean) => {
    if (open) {
        dates.value = [] as any;
        hackValue.value = [] as any;
    } else {
        hackValue.value = undefined;
    }
};
const onChange = (val: RangeValue) => {
    dateArr.value = val;
    // 获取接口
};

const onCalendarChange = (val: RangeValue) => {
    dates.value = val;
};