vue+elementUi日期控件控制开始时间和结束时间以及范围在12个月之内

作为一个后端人员,写前端真的是太难受了,这个日期控件也是研究了好久才实现这么个简单功能,在此记录一下
我的控件只有到月份
效果
开始日期不可超过结束日期

开始日期不超过结束日期的前12个月

结束日期在开始日期之后

上代码啦

 <el-form-item label="开始日期">
        <el-date-picker
          v-model="dateRange[0]"
          size="mini"
          format="yyyy-MM"
          :picker-options="beginDate"
          type="month"
          placeholder="请选择"
          range-separator="-"
          @change='changeBeginTime'
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期">
        <el-date-picker
          v-model="dateRange[1]"
          size="mini"
          format="yyyy-MM"
          :picker-options="endDate"
          type="month"
          placeholder="请选择"
          range-separator="-"
          @change='changeEndTime'
        ></el-date-picker>
      </el-form-item>

重点是:picker-options="endDate"这一行

定义一下

此处写在create里，我这个是只能选择近12个月之内的月份，各位可以根据自己的需求来定这个范围

 this.beginDate = {
        disabledDate: (time) => {
          if (this.dateRange[1] != '') {
            return (
              time.getTime() > this.dateRange[1] ||
              time.getTime() < new Date(new Date().getFullYear()-1,new Date().getMonth())
            )
          }
        }
      };
      this.endDate = {
        disabledDate: (time) => {
          return(
            time.getTime() > new Date()||
            time.getTime() < this.dateRange[0]
          )
        }
      };

搞定!!!