ant design vue时间范围选择器时间范围限制设置

---

需求：最多只能选择7天，且不能超过当前日期。

<a-range-picker
  v-model="params.time"
  format="YYYY-MM-DD"
  value-format="YYYY-MM-DD"
  :disabledDate="disabledDate"
  @change="changeRange"
  @openChange="onOpenChange"
  @calendarChange="onCalendarChange"
/>

1、首先先给一个变量记录起始时间，作用是可控制前后范围，比如7天的话，就是控制向左选最多6天，向右选也最多6天

data () {
    return {
        disabledCurrent: null
    }
}

2、再来，方法需要两个，一个是openChange，另一个是calendarChange

事件 #

事件名称	说明	回调参数
openChange	弹出日历和关闭日历的回调	function(status)
calendarChange	待选日期发生变化的回调	function(dates, dateStrings)

// 获取手动选择的时间段起始值
onCalendarChange (dates) {
  this.disabledCurrent = dates[0]
}

// 清空时间段起始值
onOpenChange (status) {
  this.disabledCurrent = null
}

3、最后，判断被选的日期的条件是(1)、不能小于起始时间6天（2）、不能大于起始时间6天（3）、不能大于当前日期。（这三小点）。

// 开始时间 - 结束时间 不能超过7天 且禁止选超过当前日期时间
disabledDate (current) {
  if (!this.disabledCurrent) return current > moment()
  return (
    (current && current < moment(this.disabledCurrent).subtract(6, 'days')) ||
    current > moment(this.disabledCurrent).add(6, 'days') ||
    current > moment()
  )
}

---

同理，不同时间范围限制都可运用这3步走，祝您开心！！！