element的日期选选择组件怎么限制天数范围

在写日期选择组件的时候会碰到一些需求，第1个日期不能比第2个大，第2个日期不能比第1个小

element的组件里有可以选择时间范围了，一个整体的日期选择框，像这样的

如果是这样的组件那这个需求就方便多了，可是，产品的需求是这样的分开的两个单例的选择日期，这可咋限制时间范围

就比葫芦画瓢，看着element的方法去改
其实只要在日期选择组件上加一个

    <el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
    //加上  picker-options="pickerOptions"  这个事件

在data里面有个属性可以去计算它，可是问题又出现了，我不想在data里面操作怎么办，这个时候vue的computed计算属性就起到作用了

//我在计算属性里写了校验
  computed:{
    // 开始日期
    banDateFn1 (){
         let _this = this
          return{
            disabledDate(time){
             return time.getTime() >= Date.parse(_this.filterData.endTime);
            }
          }
    },
    // 结束日期
    banDateFn2 (){
         let _this = this
          return{
            disabledDate(time){
             return time.getTime() < Date.parse(_this.filterData.beginTime);
            }
          }
    },
  },

banDateFn1和banDateFn2 等价于 picker-options="pickerOptions"这个方法里面的pickerOptions方法

此时需求又来了一个，限制的60天内，只能让我选择60天范围内的，简单，我们继续看代码，康康加了什么东西

  computed:{
    banDateFn1 (){
         let _this = this;
         let seven = 60 * 24 * 60 * 60 * 1000;
          return{
            disabledDate(time){
             return time.getTime() + seven <= Date.parse(_this.filterData.transactionApplyTimeEnd);

            }
          }
    },
    // 申请结束日期
    banDateFn2 (){
         let _this = this;
         let seven = 60 * 24 * 60 * 60 * 1000;
          return{
            disabledDate(time){
             return time.getTime() - seven > Date.parse(_this.filterData.transactionApplyTimeStart);

            }
          }
    },
    }

看见seven了吗？代表了60天，顺着刚刚的意思，加一个60天减一个60天就ok了，希望对你有所帮助