Ant Design Vue 的日期选择器设置时间范围

// 开始时间
<a-date-picker 
  format="YYYY-MM"
  :disabled-date="disableStartTime"
/>
// 结束时间
<a-date-picker 
  format="YYYY-MM"
  :disabled-date="disableEndTime"
/>

1. 设置开始时间只能选择今天之后的时间(包含今天)且不能大于结束时间

disableStartTime(startTime) {
     // 获取结束时间
     const endTime = this.form.getFieldValue('endAt');
    // 如果没有结束时间和开始时间时执行，开始时间要在今天或者今天之后选择
    if (!startTime || !endTime) {
      return startTime < moment().subtract(1, 'day')
    }
    // 否则就缩小可选的范围，开始时间可选范围要比结束时间小
    return startTime < moment().subtract(1, 'day') || startTime.valueOf() > endTime.valueOf();
},

2. 设置结束时间只能在开始时间之后

disableEndTime(endTime) {
    const startTime = this.form.getFieldValue('startAt');
    if (!endTime || !startTime) {
      return endTime < moment().subtract(1, 'day')
    }
    // 结束时间在开始时间之后
    return endTime < moment().subtract(1, 'day') || startTime.valueOf() > endTime.valueOf();
    // 结束时间选择范围在开始时间一个月后
    return endTime < moment().subtract(1, 'day') || endTime < moment(startTime).add(1, 'M');
  },

3. 进阶，当你结束时间选好之后，怎么才能把另一个时间的范围设置在结束时间的下一个的某一段呢？

// 例如结束时间是2022年6月，我们要设置一个礼物发放时间在2022年7月的1到10号这个范围
<a-date-picker 
  format="YYYY-MM-DD"
  :disabled-date="disabledStartDate"
/>
disabledStartDate(startTime) {
    // 获取结束时间 例如时间为(2022-6)
    const endTime = this.form.getFieldValue('endAt'); 
    // 获取结束时间的下个月的1号 (2022-7-1)
    const start = moment(endTime).month(moment(endTime).month() + 1).startOf('month');
    // 获取结束时间的下个月的11号 (2022-7-11)
    const end = moment(start).add(10, 'd');
    if (!startTime || !endTime) {
      return startTime < moment().subtract(1, 'day')
    }
    // 筛选礼物发放时间为结束时间的下个月的1-10号
    return startTime < moment().subtract(1, 'day') || startTime < start || startTime > end;
 },