最近在做项目的时候，需求增加了一个时间范围选择的限制，开始时间和结束时间之间相差不能大于30天，且今天之后的日期禁选

感谢参考文章：https://blog.csdn.net/u014582342/article/details/127580384

目前的实现效果：

直接上代码：

<a-range-picker
   value-format="YYYY-MM-DD"
   :disabledDate="disabledDateHandler"
   @calendarChange="(dates) => (selectDateTime = dates[0])"
   @change="handleRangeTimeChange"
   @openChange="() => (selectDateTime = '')"
   :ranges="timeScopedPre"
 />

属性解释：

1. value-format : 可选，绑定值的格式，对 value、defaultValue、defaultPickerValue 起作用。不指定则绑定值为 moment 对象,String格式，主要是时间的格式

2. disabledDate :不可选择的日期 (currentDate: moment) => boolean （日期当中的每一天都会调用这个函数）

3. ranges: 预设时间范围快捷选择 可以设定快捷选择按钮

4. calendarChange :待选日期发生变化的回调，每一次点击选择日期,就会调用一下这一个函数，当前场景的使用目的是为了记录选择的第一个时间selectDateTime

5. openChange：打开时间选择框的时候执行的回调，每次打开的时候清除记录的第一个时间selectDateTime

import moment from "moment";
data() {
    return {
     selectDateTime: '',
      timeScopedPre: {
        近七日: [moment().subtract(6, 'd'), moment()],//加上今天一共是七天，subtract方法是传6,往后推6天
        近14日: [moment().subtract(13, 'd'), moment()],
        近30日: [moment().subtract(29, 'd'), moment()]
      }
}

methods:{
    //时间范围变化的时间执行，清除记录的第一个时间
    handleRangeTimeChange(date, dateString) {
      this.selectDateTime = ''
      this.$emit('handleRangeTimeChange', dateString)
    },
    //禁选时间的处理，这一步很关键
    disabledDateHandler(current) {
      if (this.selectDateTime) {
        //这里实现下面功能
        //！！！只能选取30天,这里需要填写29,不然会出现多出来了一天的情况
        //和禁止选择今天之后的日期

        // ！！！this.selectDateTime + ' 23:59:59' 这个必须拼接23:59:59 否则第一次选择只能往后选择29天
        return (
          current > this.$moment() ||
          current > this.$moment(this.selectDateTime + ' 23:59:59').add(29, 'd') ||
          current < this.$moment(this.selectDateTime).subtract(29, 'd')
        )
      } else {
        //这里实现下面功能
        //禁止选择今天之后的日期
        return current > this.$moment()
      }
    }
}

参考了一些禁用时间范围的文章，但是期间自己也踩到很多坑，希望我的总结能对你们有用！

这是第一次发技术相关的文章，有技术问题的朋友也欢迎私聊我，一起交流~