elementUI 日期选择器限制时间范围

elementUI 日期选择器限制时间范围

（借鉴或根据自己需求修改，纯用于自己记录使用并学习）
产品需求，新建任务的时候，选择一个名称，然后返回该名称的有效日期，只能在有限日期内选择任务的时间

使用的是elementUI自带的picker-options这个属性，因为我这个是需要动态的获取名称的有效周期，所以在切换名称的时候，使用change事件调用后台的给的接口，获取到该名称的有效周期，

<el-select v-model="businessName" remote placeholder="请选择名称" @change="getDisableTime" :popper-append-to-body="false" >
     <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id">
     </el-option>
</el-select>

 <el-date-picker 
 style="width:100%" 
 v-model="busTime"
  type="daterange" 
  :editable="false" 
  range-separator="→" 
  start-placeholder="开始日期"
  end-placeholder="结束日期" 
  value-format="yyyy-MM-dd" 
  clearable 
  :picker-options="executeTimeOptions" 	>
 </el-date-picker>

export default {
   data(){
    return{
       minDate:'',  //这两个值一定要定义
       maxDate:'',
       busTime:[],
       executeTimeOptions:{   
           disabledDate:(time)=>{
           if(this.minDate && this.maxDate){
           //  this.maxDate  = new Date(this.maxDate).getTime();我是直接获取的时间戳，如果后台返回的格式不同，因为这里是对比的时间戳，所以在这里转换格式或者获取的时候转换成时间戳都可以,
             return time.getTime() < Date.now() - 8.64e7 || time.getTime() > this.maxDate ||time.getTime() < this.minDate;
             //这里是大于结束日期和小于开始日期，小于今天的日期都不可选择
           }
        }
      }
      }
      },
      methods:{
         // 获取时间值
         getDisableTime(){
              let _this= this;
              _this.busTime= [];
              myAxios.get(后台给的接口),{传入选择的名称id},(res)=>{
               if(res.status == 200){
                 //获取名称的有效期的开始时间和结束时间
                  _this.minDate = res.data.startTime;
                  _this.maxDate  = res.data.endTime;
              }else{
                 _this.minDate = '';
                 _this.maxDate  = '';
              }
           })
      },
      }
  }

二。时间选择跨度为一年：

<el-col :xs="10" :sm="8" :md="8" :lg="8" class="mt">
        <el-form-item label="时间">
              <el-date-picker v-model="form.date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOption" @change="getTime">
              </el-date-picker>
        </el-form-item>
 </el-col>

pickerOption: {
        disabledDate(time) {
          let startyear = new Date().getFullYear() - 1
          let endYear = new Date().getFullYear() + 1
          let endDate = endYear + '-' + (new Date().getMonth() + 1) + '-' +
            new Date().getDate()
          let startDate = startyear + '-' + (new Date().getMonth() + 1) + '-' +
            new Date().getDate()
          let _endDate = new Date(endDate)
          let _startDate = new Date(startDate)
          //即大于开始时间小于结束时间
          return time.getTime() > _endDate.getTime() || time.getTime() <
            _startDate.getTime()
        },
      },

二。时间选择不超过13个月，当月算1个月（限制到去年当月的1号）：

pickerOption: {
        disabledDate(time) {
          // let startDate = startyear + '-' + (new Date().getMonth() + 1) + '-' +
          //   new Date().getDate();//限制12个月,限制到天
          let startyear = new Date().getFullYear() - 1
          let startDate = startyear + '-' + (new Date().getMonth() + 1) + '-' +'1';//当月的1号
          let _startDate = new Date(startDate);
          return time.getTime() > Date.now() | time.getTime() < _startDate.getTime();
        },
      },