vue2使用el-date-picker实现动态日期范围demo

<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;
                    }
                }
            }
        };
    }
    ……
};

<el-date-picker  type="daterange" :disabled-date="disabledDate" @calendar-change="eventCalendarChange"
let _minTime = null;
let _maxTime = null;
let timeRange = 3 * 30 * 24 * 60 * 60 * 1000;
const disabledDate = (time) => {
    if (_minTime && _maxTime) {
        return time.getTime() < _minTime || time.getTime() > _maxTime;
    }
};
const eventCalendarChange = (data) => {
    const [ start ] = data;
    if (start) {
        _minTime = start.getTime() - timeRange;
        _maxTime = start.getTime() + timeRange;
    } else {
        _minTime = null;
        _maxTime = null;
    }
};