antdv RangePicker组件选中前后一天，前后一周，前后一个月

1、前后一天

<div class="time-box">
  <button
    class="time-item"
    @click="beforeDay(true)"
    :style="disnone ? ' cursor: no-drop;' : ' cursor: pointer;'"
    :disabled="disnone ? true : false"
  >
    前一天
  </button>
  <a-range-picker
    :allowClear="false"
    v-model="timeForm"
    class="range-item"
    style="width: 98%"
    format="YYYY-MM-DD"
    :ranges="{
      当天: [moment(), moment()],
    }"
    :placeholder="['开始时间', '结束时间']"
    :disabledDate="disabledDate"
    show-time
    @ok="confirm"
  >
  </a-range-picker>
  <button
    :disabled="disnone ? true : false"
    class="time-item"
    :style="disnone ? ' cursor: no-drop;' : ' cursor: pointer;'"
    @click="beforeDay(false)"
  >
    后一天
  </button>
</div>

js:
data() {
  // 初始化时间
  this.starTime = moment().format("YYYY-MM-DD");
  this.endTime = moment().format("YYYY-MM-DD");
  return {
    timeForm: [
      moment(this.starTime, "YYYY-MM-DD"),
      moment(this.endTime, "YYYY-MM-DD"),
    ],
  };
},
methods: {
	beforeDay(iBoole) {
      this.disnone = false;
      if (this.timeForm.length == 0) {
        return;
      }
      let res = {};
      // 不是当前时间，选择加一，是不行的
      // 计算与现在时间差，在此情况下减一
      res = compareTime(
        new Date(this.timeForm[0]).getTime(),
        new Date().getTime()
      );
      // 两个时间的差
      let response = compareTime(
        new Date(this.timeForm[1]).getTime(),
        new Date(this.timeForm[0]).getTime()
      );
      // 计算与现在时间差，在此情况下减一
      let day = res.Days;
      let secondDay = response.Days;
      if (iBoole) {
        day += 1;
        secondDay = day + secondDay;
        this.$nextTick(() => {
          this.timeForm = [
            moment(moment().add(-day, "day"), "YYYY-MM-DD"),
            moment(moment().add(-secondDay, "day"), "YYYY-MM-DD"),
          ];
          this.getTablePage();
        });
      } else {
        day -= 1;
        secondDay = day + secondDay;
        if (day == -1 || secondDay == -1) {
          this.$message.error("不可选未来时间");
          return false;
        }
        this.$nextTick(() => {
          this.timeForm = [
            moment(moment().add(-day, "day"), "YYYY-MM-DD"),
            moment(moment().add(-secondDay, "day"), "YYYY-MM-DD"),
          ];
          // 需转成moment格式，不然会报错
          this.getTablePage();
        });
      }
    },
}

2、前后一周

<div class="time-box">
  <button
    class="time-item"
    :style="disnone ? ' cursor: no-drop;' : ' cursor: pointer;'"
    :disabled="disnone ? true : false"
    @click="beforeDay(true)"
  >
    前一周
  </button>
  <a-range-picker
    :allowClear="false"
    v-model="timeForm"
    class="range-item"
    style="width: 98%"
    format="YYYY-MM-DD"
    :ranges="{
      当天: [moment(), moment()],
    }"
    show-time
    :placeholder="['开始时间', '结束时间']"
    @ok="confirm"
    :disabledDate="disabledDate"
  >
  </a-range-picker>
  moment().startOf('isoWeek'), moment().format("YYYY-MM-DD")
  <button
    class="time-item"
    :style="disnone ? ' cursor: no-drop;' : ' cursor: pointer;'"
    @click="beforeDay(false)"
  >
    后一周
  </button>
</div>

js:
data() {
  // 初始化时间
  this.starTime = moment().startOf("isoWeek").format("YYYY-MM-DD");
  this.endTime = moment().format("YYYY-MM-DD");
  return {
    timeForm: [
      moment(this.starTime, "YYYY-MM-DD"),
      moment(this.endTime, "YYYY-MM-DD"),
    ],
  };
},
methods: {
	beforeDay(iBoole) {
      if (this.timeForm.length == 0) {
        return;
      }
      let res = null;
      let response = null;
      let secondDay = undefined;
      let day = undefined;
      // 不是当前时间，选择加一，是不行的
      // 计算与现在时间差，在此情况下减一
      res = compareTime(
        new Date(this.timeForm[0]).getTime(),
        new Date().getTime()
      );
      // 两个时间的差
      response = compareTime(
        new Date(this.timeForm[1]).getTime(),
        new Date(this.timeForm[0]).getTime()
      );
      // 计算与现在时间差，在此情况下减一
      day = res.Days;
      secondDay = response.Days;
      if (iBoole) {
        day += 7;
        secondDay = day + secondDay;
        this.$nextTick(() => {
          this.timeForm = [
            moment(moment().add(-day, "day"), "YYYY-MM-DD"),
            moment(moment().add(-secondDay, "day"), "YYYY-MM-DD"),
          ];
          this.getTablePage(this.timeForm[0], this.timeForm[1]);
        });
      } else {
        day -= 7;
        secondDay = day + secondDay;
        if (day == -5 || secondDay == -7) {
          this.$message.error("不可选择未来数据");
          return false;
        }
        this.$nextTick(() => {
          this.timeForm = [
            moment(moment().add(-day, "day"), "YYYY-MM-DD"),
            moment(moment().add(-secondDay, "day"), "YYYY-MM-DD"),
          ];
          this.getTablePage(this.timeForm[0], this.timeForm[1]);
        });
      }
    },
}

3、前后一个月

<div class="time-box">
   <button
     class="time-item"
     @click="beforeDay(true)"
     :style="disnone ? ' cursor: no-drop;' : ' cursor: pointer;'"
     :disabled="disnone ? true : false"
   >
     前一月
   </button>
   <a-range-picker
     :allowClear="false"
     v-model="timeForm"
     class="range-item"
     style="width: 98%"
     format="YYYY-MM-DD"
     :ranges="{
       当天: [moment(), moment()],
     }"
     show-time
     :placeholder="['开始时间', '结束时间']"
     @ok="confirm"
     :disabledDate="disabledDate"
   >
   </a-range-picker>
   <button
     class="time-item"
     :disabled="disnone ? true : false"
     :style="disnone ? ' cursor: no-drop;' : ' cursor: pointer;'"
     @click="beforeDay(false)"
   >
     后一月
   </button>
 </div>

js：
data() {
  // 初始化时间
  this.starTime = moment().startOf("month").format("YYYY-MM-DD");
  this.endTime = moment().format("YYYY-MM-DD");
  return {
    timeForm: [
      moment(this.starTime, "YYYY-MM-DD"),
      moment(this.endTime, "YYYY-MM-DD"),
    ],
  };
},
methods: {
	beforeDay(iBoole) {
      if (this.timeForm.length == 0) {
        return;
      }
      let res = null;
      let response = null;
      let secondDay = undefined;
      let day = undefined;
      // 不是当前时间，选择加一，是不行的
      // 计算与现在时间差，在此情况下减一
      res = compareTime(
        new Date(this.timeForm[0]).getTime(),
        new Date().getTime()
      );
      // 两个时间的差
      response = compareTime(
        new Date(this.timeForm[1]).getTime(),
        new Date(this.timeForm[0]).getTime()
      );
      // 计算与现在时间差，在此情况下减一
      secondDay = response.Days;
      day = res.Days;
      secondDay = day + secondDay;
      let timeArr = moment(this.timeForm[0]).format("YYYY-MM-DD").split("-");
      console.log(
        (timeArr[0] % 4 == 0 && timeArr[0] % 100 != 0) || timeArr[0] % 400 == 0
      );
      if (iBoole) {
        // 上月
        if (
          //判断是闰年吗？闰年2月29天
          (timeArr[0] % 4 == 0 && timeArr[0] % 100 != 0) ||
          timeArr[0] % 400 == 0
        ) {
          if (
            timeArr[1] == 5 ||
            timeArr[1] == 7 ||
            timeArr[1] == 10 ||
            timeArr[1] == 12
          ) {
            // 如果是31天就减30天
            day += 30;
            secondDay += 30;
          } else if (timeArr[1] == 3) {
            // 三月减29天
            day += 29;
            secondDay += 29;
          } else {
            // 其余都是31天
            day += 31;
            secondDay += 31;
          }
        } else {
          // 平年不可以被整除  2月28天
          if (
            timeArr[1] == 5 ||
            timeArr[1] == 7 ||
            timeArr[1] == 10 ||
            timeArr[1] == 12
          ) {
            day += 30;
            secondDay += 30;
          } else if (timeArr[1] == 3) {
            day += 28;
            secondDay += 28;
          } else {
            day += 31;
            secondDay += 31;
          }
        }
        this.$nextTick(() => {
          this.timeForm = [
            moment(moment().add(-day, "day"), "YYYY-MM-DD"),
            moment(moment().add(-secondDay, "day"), "YYYY-MM-DD"),
          ];
          this.getTablePage();
        });
      } else {
        // 下月
        let years = new Date().getFullYear();
        let now = new Date().getMonth() + 1;
        let timeNow = moment(this.timeForm[1]).format("YYYY-MM-DD").split("-");
        if (years == timeNow[0] && (now == timeNow[1] || now == timeArr[1])) {
          this.$message.error("不可选未来时间");
          return false;
        }

        if (
          (timeArr[0] % 4 == 0 && timeArr[0] % 100 != 0) ||
          timeArr[0] % 400 == 0
        ) {
          if (
            timeArr[1] == 1 ||
            timeArr[1] == 3 ||
            timeArr[1] == 5 ||
            timeArr[1] == 7 ||
            timeArr[1] == 8 ||
            timeArr[1] == 10 ||
            timeArr[1] == 12
          ) {
            day -= 31;
            secondDay -= 31;
          } else if (timeArr[1] == 3) {
            day -= 29;
            secondDay -= 29;
          } else {
            day -= 30;
            secondDay -= 30;
          }
        } else {
          if (
            timeArr[1] == 1 ||
            timeArr[1] == 3 ||
            timeArr[1] == 5 ||
            timeArr[1] == 7 ||
            timeArr[1] == 8 ||
            timeArr[1] == 10 ||
            timeArr[1] == 12
          ) {
            day -= 31;
            secondDay -= 31;
          } else if (timeArr[1] == 2) {
            day -= 28;
            secondDay -= 28;
          } else {
            day -= 30;
            secondDay -= 30;
          }
        }

        this.$nextTick(() => {
          this.timeForm = [
            moment(moment().add(-day, "day"), "YYYY-MM-DD"),
            moment(moment().add(-secondDay, "day"), "YYYY-MM-DD"),
          ];
          this.getTablePage(this.timeForm[0], this.timeForm[1]);
        });
      }
    },
}

快乐的学习，事半功倍