el-date-picker自由设置时间范围

185 阅读1分钟

查询数据很多,又没有分页,当选择范围很大的时候,界面会极其卡顿,所以做个查询时间的限制。 现设置查询范围为前后一个月内,大概思路:

  1. 打开日期选择器时时间是不做限制的(超过当前日期后的日期不可选),可以任选一个日期或时间;
  2. 选中一个后,可选时间范围及时响应为它向前一个月或向后一个月。

主要代码如下:

<el-date-picker 
    v-model="value1" 
    type="datetimerange" 
    range-separator="至" start-placeholder="开始日期"
    end-placeholder="结束日期" 
    :default-time="['08:30:00', '08:30:00']" 
    :picker-options="pickerOptions">
</el-date-picker>

/**vue2 data(){}中:**/

value1: '',
pickerOptions:{
        onPick:({maxDate, minDate}) => {
          console.log('maxDate=',maxDate)
          console.log('minDate=',minDate)
          this.value1 = maxDate ? maxDate.getTime():minDate ? minDate.getTime():''
        },
        disabledDate: (time) => {
          if(this.value1){
            const nowDate = new Date();
            const curDate = this.value1
            const startTime = new Date(curDate);
            const endTime = new Date(curDate);
            startTime.setMonth(startTime.getMonth() - 1);
            endTime.setMonth(endTime.getMonth() + 1);
            return time.getTime() < startTime.getTime() || time.getTime() > endTime.getTime() || time.getTime()>nowDate.getTime();
          }
        }
 },