iView的DatePicker日期选择器，设置日期选择区间

需求：如若今天是2021-11-8，那么时间区间是 2021-10-26 ~ 2021-11-8共14天，选择的时间只能在14天中，并且开始时间离结束时间不能超过7天

1、html 结构部分

<div class="datePicker">
     <DatePicker
       :editable="false"
       :clearable="false"
       type="date"
       format="yyyy-MM-dd"
       placeholder="开始日期"
       style="width: 96px"
       :value="startDate"
       v-model="startDate"
       :options="startTimeOptions"
       @on-change="startTimeChange"
     ></DatePicker>
     <img style="height:30px" src="../../assets/img/contentImg/arrowLeft.png" alt="" />
     <DatePicker
       :editable="false"
       :clearable="false"
       type="date"
       format="yyyy-MM-dd"
       placeholder="结束日期"
       style="width: 96px"
       :options="endTimeOptions"
       :value="endDate"
       v-model="endDate"
       @on-change="endTimeChange"
     ></DatePicker>
     <Icon style="margin-right:5px" type="md-calendar" color="#d5d5d5" size="20" />
</div>

2、下载并在mian.js中引入moment，挂载到原型中

//引入moment
import moment from "moment";
Vue.prototype.$moment = moment;

3、定义初始规则和参数

      startDate: "", // 开始日期
      endDate: "", // 结束日期
      startDate0: "",
      endDate0: "",
      startTimeOptions: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        }
      }, // 开始日期设置
      endTimeOptions: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        }
      }, // 结束日期设置

4、改变时间时触发函数

    // 一开始就显示7天前到今天的时间
    // 最近七日
    lastSevenDay() {
      let aData = new Date();
      // 获取当天的年月日
      let todayDate = aData.getFullYear() + "-" + (aData.getMonth() + 1 > 9 ? aData.getMonth() + 1 : "0" + (aData.getMonth() + 1)) + "-" + (aData.getDate() > 9 ? aData.getDate() : "0" + aData.getDate());
      // 获取七天前的日期
      let time = new Date().getTime() - 6 * 24 * 60 * 60 * 1000;
      let lastThreeDay = new Date(time);
      let month = lastThreeDay.getMonth();
      let day = lastThreeDay.getDate();
      lastThreeDay = lastThreeDay.getFullYear() + "-" + (month >= 9 ? month + 1 : "0" + (month + 1)) + "-" + (day >= 9 ? day : "0" + day);
      // console.log(477, lastThreeDay)
      this.startDate = lastThreeDay;
      this.endDate = todayDate;
      this.startDate0 = lastThreeDay;
      this.endDate0 = todayDate;
      // console.log(1108, this.startDate, this.endDate);
      let endTime = this.endDate ? new Date(this.endDate).valueOf() : "";
      let startTime = new Date().valueOf() - 14 * 1000 * 60 * 60 * 24;
      this.startTimeOptions = {
        disabledDate(date) {
          if (endTime) {
            return (
              (date && date.valueOf() >= endTime) ||
              (date && date.valueOf() <= startTime)
            );
          } else {
            return date && date.valueOf() > Date.now();
          }
        }
      }
    },
    // 改变开始日期
    startTimeChange(value) {
      // console.log(value, this.startDate);
      if (new Date(this.endDate).getTime() - new Date(value).getTime() > 7 * 24 * 1000 * 60 * 60 ) {
        this.startDate = this.startDate0;
        // console.log(901, this.startDate, this.endDate);
        this.endDate = this.$moment(new Date(this.endDate).getTime())
          .startOf("day")
          .format("YYYY-MM-DD");
          console.log(this.$moment(new Date(this.endDate).getTime()).startOf("day").format("YYYY-MM-DD"));
        console.log(905, this.startDate, this.endDate);
        this.$Message.warning({
          content: "所选时间区间超过七天，请重新选择",
          duration: 3,
          closable: true
        });
        return false;
      } else {
        this.startDate0 = value;
        this.startDate = value;
        this.endDate = this.$moment(new Date(this.endDate).getTime())
          .startOf("day")
          .format("YYYY-MM-DD");
      }
      // console.log(912, this.startDate, this.endDate);
      // 获取数据部分
      this.GetQueryRoomModelList();
      if (this.$refs.getTimeLine) {
        this.$refs.getTimeLine.fullDate =
          (new Date(this.startDate).getTime() - 1 * 24 * 1000 * 60 * 60) / 1000;
        // this.$refs.getTimeLine.startValue = this.$moment(
        //   new Date(this.startDate).getTime() - 1 * 24 * 1000 * 60 * 60
        // )
        //   .startOf("day")
        //   .format("YYYY-MM-DD");
        this.$refs.getTimeLine.startValue = this.startDate;
        this.$refs.getTimeLine.GetRoomAiSupervisionsList();
        this.$refs.getTimeLine.getBackupTimeline(1);
      }
      // console.log(912, value);
      // 重新制定结束时间规则
      this.endTimeOptions = {
        disabledDate: date => {
          let startTime = this.startDate
            ? new Date(this.startDate).valueOf() - 1 * 24 * 60 * 60 * 1000
            : "";
          // return (date && 60 * 60 * 24 * 2 * 1000 < date.valueOf() < startTime)
          return (
            date && (Date.now() < date.valueOf() || date.valueOf() < startTime)
          ); // 结束时间大于等于开始时间
        }
      };
    },
    // 改变结束日期
    endTimeChange(value) {
      // console.log(this.endDate);
      if (
        new Date(value).getTime() - new Date(this.startDate).getTime() >
        7 * 24 * 1000 * 60 * 60
      ) {
        this.endDate = this.endDate0;
        // console.log(950, this.endDate, this.startDate);
        this.startDate = this.$moment(new Date(this.startDate).getTime())
          .startOf("day")
          .format("YYYY-MM-DD");
        // console.log(954, this.endDate, this.startDate);
        this.$Message.warning({
          content: "所选时间区间超过七天，请重新选择",
          duration: 3,
          closable: true
        });
        return false;
      } else {
        this.endDate0 = value;
        this.endDate = value;
        this.startDate = this.$moment(new Date(this.startDate).getTime())
          .startOf("day")
          .format("YYYY-MM-DD");
      }
      // console.log(957, this.endDate, this.startDate);
      // 获取数据部分
      this.GetQueryRoomModelList();
      if (this.$refs.getTimeLine) {
        this.$refs.getTimeLine.binlogDate =
          (new Date(this.endDate).getTime() + 1 * 24 * 1000 * 60 * 60) / 1000;
        // this.$refs.getTimeLine.endValue = this.$moment(
        //   new Date(this.endDate).getTime() + 1 * 24 * 1000 * 60 * 60
        // )
        //   .startOf("day")
        //   .format("YYYY-MM-DD");
        this.$refs.getTimeLine.endValue = this.endDate;
        // console.log(this.startDate);
        this.$refs.getTimeLine.GetRoomAiSupervisionsList();
        this.$refs.getTimeLine.getBackupTimeline(1);
      }
      // 重新制定开始时间规则
      let endTime = this.endDate ? new Date(this.endDate).valueOf() : "";
      let startTime = new Date().valueOf() - 14 * 1000 * 60 * 60 * 24;
      this.startTimeOptions = {
        disabledDate(date) {
          if (endTime) {
            return (
              (date && date.valueOf() >= endTime) ||
              (date && date.valueOf() <= startTime)
            );
          } else {
            return date && date.valueOf() > Date.now();
          }
        }
      };
    },