前端 vue antd ui库a-range-picker 时间限制

今日、昨日、近7天、近30天、自定义

进入页面默认选择今日
自定义：时间选择跨度最多31天，只能选择当前日期之前的半年时间（前端限制）

<template>
  <div class="select-box">
    <div class="flex">
      <template v-if="dateString.length <= 1">
        <span>统计时间：</span>
        <div class="flex-item">
          {{ date | formatDateTime }}
        </div>
      </template>
      <template v-else>
        <span>统计时间：</span>
        <div v-for="item in dateString" :key="item" class="flex-item">
          {{ item | parseTime("{y}-{m}-{d}") }}
        </div>
      </template>
    </div>
    <div class="select-type">
      <div class="time-type" v-for="item of timeType" @click="changeTimeType(item)" :key="item.id"
        :class="item.id == selectTimeType ? 'time-type-active' : ''">
        <div>
          {{ item.name }}
        </div>
      </div>
      <div class="time-type1" :class="selectTimeType == 0 ? 'active' : ''">
        <a-range-picker v-model="searchInfo.date" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
          :placeholder="['Start Time', 'End Time']" :disabled-date="disbaledDate"
          @calendarChange="calendarPriceRangeChange" @ok="onOk">
          <div :class="selectTimeType == 0 ? 'active' : ''">自定义</div>
        </a-range-picker>
      </div>
      <div class="self-icon">
        <a-tooltip placement="topRight">
          <template slot="title">
            <span>自定义支持在可选时间范围内，对任意连续31天的数据进行分析。
              <p>
                自定义周期查询下，默认将所选时间段与上一个时间段进行对比，例如，若查询时间选择10.11-10.20，则对比的时间段为10.01-10.10
              </p>
            </span>
          </template>
          <a-icon type="question-circle" style="cursor: pointer" />
        </a-tooltip>
      </div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
export default {
  data() {
    return {
      timeType: [{ name: '今日', id: 1 }, { name: '昨日', id: 2 }, { name: '近七天', id: 3 }, { name: '近30天', id: 4 }],
      date: new Date(),
      dateString: [],
      selectTimeType: 1, //默认选中今日
      selectPriceDate: "",
      offsetDays: 31 * 60 * 60 * 24 * 1000, //最多选择范围31天ms
      searchInfo: {
        date: [
          moment(new Date().toLocaleDateString()),
          moment(new Date().toLocaleDateString()),
        ],
      }, //查询的参数
    };
  },
  filters: {
    formatDateTime(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },
  },
  created() {
    this.$nextTick(function () {

    });

  },
  mounted() {
    this.timer = setInterval(() => {
      if (this.dateString.length <= 1) {
        this.date = new Date(); //修改数据date
      }
    }, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); //在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    // 切换时间类型选择--今日--昨日
    changeTimeType(item) {
      let newDays = [];
      let toDate = new Date(new Date().toLocaleDateString()).getTime();
      switch (item.id) {
        case 8:
          newDays = [toDate, toDate + (24 * 60 * 60 * 1000 - 1)] //结束时间];
          break;
        case 1:
          newDays = [
            toDate - 1 * 24 * 3600 * 1000,
            toDate + (24 * 60 * 60 * 1000 - 1),
          ];
          break;
        case 2:
          newDays = [
            toDate - 7 * 24 * 3600 * 1000,
            toDate + (24 * 60 * 60 * 1000 - 1),
          ];
          break;
        case 4:
          newDays = [
            toDate - 30 * 24 * 3600 * 1000,
            toDate + (24 * 60 * 60 * 1000 - 1),
          ];
          break;
        default:
      }
      this.dateString = newDays;
      this.selectTimeType = item.id;
      this.$emit('timeChild', this.dateString)
    },
    // 选择开始时间/结束时间
    calendarPriceRangeChange(date) {
      this.selectPriceDate = date[0];
    },
    //根据选择的开始时间/结束时间，动态渲染要禁用的日期
    disbaledDate(current) {
      if (this.selectPriceDate) {
        let selectV = moment(this.selectPriceDate, "x").valueOf();
        let beforeSelectMax = moment().subtract(180, "day");//最大查询天
        return (
          current <= beforeSelectMax||
          current >=moment(new Date(selectV + this.offsetDays).getTime(), "x") ||
          current <=moment(new Date(selectV - this.offsetDays).getTime(), "x") ||
          current >= moment().endOf("day")
        );
      } else {
        const maxRange = 180; //最大查询天
        let beforeSelectMax = moment().subtract(maxRange, "day");
        let afterSelectMin = moment().subtract("day");
        return (
          current && (current >= afterSelectMin || current <= beforeSelectMax)
        );
      }
    },
    onChange(value, dateString) {
      this.selectPriceDate = "";
    },
    // 确定的时间
    onOk(value) {
      console.log("onOk: ", value);
      let { date } = this.searchInfo;
      this.dateString = [
        date[0] && new Date(date[0]).getTime(),
        date[1] && new Date(date[1]).getTime(),
      ];
      this.$emit('timeChild', this.dateString)
      this.selectTimeType = 0;
      return {
        beginTime: date[0] && new Date(date[0]).getTime(),
        endTime: date[1] && new Date(date[1]).getTime(),
      };
    },
  },
};
</script>
<style lang="less" scoped>
.select-box {
  padding: 20px;
  width: 100%;
  height: 86px;
  background: #ffffff !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.flex {
  display: flex;
  justify-content: flex-start;
}

.flex-item:first-child {
  margin-right: 10px;
}

.flex-item:last-child {
  margin-left: 10px;
}

.select-type {
  display: flex;
  align-items: center;

  .time-type {
    height: 36px;
    background: #f1f1f1;
    border-radius: 4px;
    padding: 11px 20px;
    display: flex;
    align-content: center;
    margin-right: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 14px;
  }

  .time-type:first-child {
    margin-left: 0px;
  }

  .time-type-active {
    color: #ffffff;
    background: #568bff;
  }

  .self-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
  }

  .search-item {
    margin: 0 10px;
  }
}

.time-type-active {
  color: #ffffff;
  background: #568bff;
}

.time-type1 {
  width: 82px;
  height: 36px;
  background: #f1f1f1;
  border-radius: 4px;
  padding: 11px 20px;
  display: flex;
  align-content: center;
  align-items: center;
  // margin-right: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 14px;
}

.active {
  color: #fff !important;
  background: #568bff;
}
</style>