vue实现el-date-picker日期,只可选中当前日期的前一天和选中部分的前后30天;

实现el-date-picker日期,只可选中当前日期的前一天和选中部分的前后30天;

1.template
vue实现el-date-picker日期,只可选中当前日期的前一天和选中部分的前后30天;_第1张图片

 <el-date-picker
            v-model="returnSummaryObj.collectDate"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            @change="changeData"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>

2.script-data
vue实现el-date-picker日期,只可选中当前日期的前一天和选中部分的前后30天;_第2张图片

 pickerMinDate: "",
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime();
          if (maxDate) {
            this.pickerMinDate = "";
          }
        },
        disabledDate: time => {
          var times = Date.now();
          if (this.pickerMinDate !== "") {
            let one = 30 * 24 * 3600 * 1000;
            let minTime = this.pickerMinDate - one;
            let maxTime = this.pickerMinDate + one;
            if (maxTime > times) {
              maxTime = times - 8.64e7;
            }
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
          return this.dealDisabledDate(time);
        }
      },

3.methods
在这里插入图片描述

dealDisabledDate(time) {
      var times = Date.now();
      return time.getTime() > times - 8.64e7;
    },

你可能感兴趣的:(vue)