element 动态改变el-date-picker的可选时间范围

element 动态改变el-date-picker的可选时间范围

在开发web端项目时，我们经常会遇到通过各种时间范围筛选条件查数据，那我们element的时间选择器是最常用的，有时候由于需求，我们需要给时间控件加上可以选择区间，固定的可选区间还好，如果是动态的呢？先给大家看看我的应用场景。

上图就是我的应用场景了，根据左边的年份选择的是哪一年，右边的选择月度区间只能选择那一年以内的月份，前一年的也选不了，左边的年份选择之后右边的月度可选区间动态改变，话不多说上代码。

//结构代码块
<el-form-item label="年份">
  <el-date-picker
     v-model="value3"
     type="year"
     size="medium"
     placeholder="选择年"
   ></el-date-picker>
 </el-form-item>
<el-form-item label="选择月度" >
    <el-date-picker
       v-model="value4"
       type="monthrange"
       clearable
       range-separator="至"
       start-placeholder="开始月份"
       end-placeholder="结束月份"
       :picker-options="pickerOptions"  //这个属性是关键
       >
     </el-date-picker>
 </el-form-item>

下面逻辑代码

data(){
   let disabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
      let year = moment(this.value3).format('YYYY')；//根据左边年份的时间获取年
      var firstMonth= new Date(+year,1,1);//element的时间控件区间控制是基于js的时间对象来控制的，我们需要转时间对象
      firstMonth.setMonth(0);//设置为这一年的第一个月，这里的0是下标
      var lastMonth= new Date(+year,1,1);//转时间对象
       lastMonth.setMonth(11);//设置为这一年的最后一个月，这里的11是下标
      return time.getTime() > new Date(lastMonth)  || time.getTime() < new Date(firstMonth) 
      //这一年的第12月份的以后的月份不能选，这一年1月份之前的月份也不能选
    }
    return {
      value3: moment(new Date()).format("YYYY"),
      pickerOptions: {
        disabledDate，//上面处理好逻辑扔到这来，和表单自定义校验规则一个套路
      },
  },

以上就是所有逻辑和代码了，通过这番操作，我感觉js原生的时间对象的一些东西我得去好好看看了，哈哈，尴尬