vue3 + el-date-picker(element-plus) 两种方式限制只能选一个月区间

1.

 

               <div style="float: right">
                    <el-date-picker v-model="state.rangeData[0]" type="date" value-format="YYYY-MM-DD" placeholder="开始" :disabled-date="pickerStartDisable" @change="changeDateRange(state.rangeData)" />-
                    <el-date-picker v-model="state.rangeData[1]" type="date" value-format="YYYY-MM-DD" placeholder="结束" :disabled-date="pickerEndDisable" @change="changeDateRange(state.rangeData)" />
                </div>
const pickerStartDisable = (time: any) => {
    const temp = state.rangeData[1];
    if (temp) {
        return (
            time.getTime() < dayjs(temp).subtract(1, 'month').valueOf() || time.getTime() > dayjs(state.rangeData[1]).valueOf()
        );
    }
}
const pickerEndDisable = (time: any) => {
    const temp = state.rangeData[0];
    if (temp) {
        return (
            time.getTime() > dayjs(temp).add(1, 'month').valueOf()  || time.getTime() < dayjs(state.rangeData[0]).valueOf()
        );
    }
}

2. 

                <el-date-picker
                    style="float: right"
                    v-model="state.rangeData"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始"
                    end-placeholder="结束"
                    value-format="YYYY-MM-DD"
                    size="default"
                    :clearable="false"
                    @change="changeDateRange"
                    @calendar-change="calendarChange"
                    @visible-change="visibleChange"
                    :disabled-date="disabledFn"
                />

const startVal = ref(null);
const calendarChange = (e) => {
   if (e[0] && !e[1]) {
      startVal.value = e[0];
   }
};

const visibleChange = (e) => {
   if (e) {
      startVal.value = null;
   }
};

const disabledFn = (current) => {
   if (!startVal.value) return false;

   let range = [dayjs(startVal.value).subtract(30, 'day'), dayjs(startVal.value).add(30, 'day')];
   let cur = dayjs(current);
   return cur < range[0] || cur > range[1];
};