Antd Vue RangePicker 限制时间跨度

想要选择一个时间段？还想给设置一个跨度? 可以选择往前n天/往后n天? 就看看这个吧~

接下来~ 没有废话

<a-form-item label="完结日期">
  <a-range-picker
    v-decorator="[
    'dateRange',
      {
        rules: [{ type: 'array', required: true, message: '请选择时间' }],
      },
    ]"
    format="YYYY-MM-DD"
    value-format="YYYY-MM-DD"
    :placeholder="['开始时间', '结束时间']"
    style="width: 100%"
    @calendarChange="calendarChange"
    @openChange="openChange"
    :disabledDate="disabledDate"
    />
</a-form-item>

export default {
  data(){
    ranges: [],
  },
  methods: {
    openChange(open) {
      if (!open) {
        this.ranges = []
      }
    },

    calendarChange(dateStr) {
      this.ranges = dateStr
    },

    disabledDate(current) {
      if (!this.ranges.length) {
        return false
      }
      const tooLate = moment(this.ranges?.[0]).subtract(5, 'day')
      const tooEarly = moment(this.ranges?.[0]).add(5, 'day')
      return !current.isBetween(tooLate, tooEarly)
    },
  }
}

<a-form-item label="完结日期">
    <a-range-picker
      v-decorator="[
        'dateRange',
        {
          rules: [{ type: 'array', required: true, message: '请选择时间' }],
        },
      ]"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      :placeholder="['开始时间', '结束时间']"
      style="width: 100%"
      @calendarChange="calendarChange"
      @openChange="openChange"
      :disabledDate="disabledDate"
    />
</a-form-item>