ant design vue日期选择组件a-range-picker选择日期在某个范围内，并动态渲染结束时间范围

​

 ant版本为1.3.1

<template>
  <div>
    <a-range-picker
      :format="'YYYY-MM-DD HH:mm:ss'"
      @change="onChange"
      v-model="date"
      :disabledDate="disabledDate"
      :placeholder="['开始时间', '结束时间']"
      @calendarChange="calendarChange"
    />
  </div>
</template>

<script>
// 这里引入是可选的，但是引入后一些操作就会很简单
import moment from "moment";
export default {
  data() {
    return {
      // 设置默认值在当前日期和当前日期的前一个月，接收一个数组
      date: [moment().subtract(1, "month"), moment()],
      start: "", // 用来记录开始时间
    };
  },

  methods: {
    moment,
    onChange(date, dateString) {
      // 开始时间置空
      this.start = "";
    },
    // 这个事件记录面板发生变化，我们将选择的时间第一个赋值个start也就是开始时间
    calendarChange(date, dateString) {
      this.start = date[0];
    },
    disabledDate(current) {
      if (this.start) {
        return (
          // 返回值是start开始日期的前后一个月并且不能选择当前日期后面的日期
          ((current > moment(this.start).add(1, "month") ||
            current < moment(this.start).subtract(1, "month")) &&
            current < moment()) ||
          current > moment()
        );
      } else {
        return current > moment();
      }
    },
  },
};
</script>

​