el-date-picker 动态日期范围

Vue2 & element ui

<el-date-picker type="daterange" :picker-options="pickerOptions"

let _minTime;
let _maxTime;
let timeRange = 10 * 24 * 60 * 60 * 1000;
export default {
    data() {
        return {
            pickerOptions:{
                  onPick(time) {
                      if (!time.maxDate) {
                        _minTime = time.minDate.getTime() - timeRange;
                        _maxTime = time.minDate.getTime() + timeRange;
                        } else {
                        _minTime = null;
                        _maxTime = null;
                        }
                    },
                  disabledDate(time) {
                    if (_minTime && _maxTime) {
                    return time.getTime() < _minTime || time.getTime() > _maxTime;
                    }
                }
            }
        };
    }
    ……
};

Vue3 & element plus

<el-date-picker  type="daterange" :disabled-date="disabledDate" @calendar-change="eventCalendarChange"

let _minTime = ref(null);
let _maxTime = ref(null);
let timeRange = 3 * 24 * 60 * 60 * 1000;

const disabledDate = (time) => {
    if (_minTime.value && _maxTime.value) {
        return time.getTime() < _minTime.value || time.getTime() > _maxTime.value;
    }
};

const eventCalendarChange = (data) => {
    const [ start ] = data;
    if (start) {
        _minTime.value = start.getTime() - timeRange;
        _maxTime.value = start.getTime() + timeRange;
    } else {
        _minTime.value = null;
        _maxTime.value = null;
    }
};