element-ui开始日期结束日期范围选择

仅做参考，可根据实际项目需求实现。可查看当前实现效果 

HTML: 

<el-form-item label="时间">
    <span style="display:inline-block">
       <el-date-picker v-model="toolbarForm.startValue" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptionsStart" type="date" placeholder="选择开始日期"></el-date-picker>
    </span>
    &nbsp;至&nbsp;
    <span style="display:inline-block">
       <el-date-picker v-model="toolbarForm.endValue" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptionsEnd" type="date" placeholder="选择结束日期"></el-date-picker>
    </span>
</el-form-item>

 JS:

data(){
    pickerOptionsStart:this.startTime(),
    pickerOptionsEnd:this.endTime(),
    toolbarForm:{
       batchNo:"",
       startValue:"",
       endValue:""
    }
}

methods:{
    //时间
    startTime(){
      let that=this;
      return{
        disabledDate(time){
          if (that.toolbarForm.endValue) {//如果结束时间不为空，则小于等于当前结束时间
            return new Date(that.toolbarForm.endValue).getTime() < time.getTime()
          } else {
            return time.getTime() > Date.now()//结束不选时，开始时间最大值小于等于当天
          }
        }
      }
    },
    endTime(){
      let that = this;
      return {
        disabledDate(time){
          if (that.toolbarForm.startValue) {//如果开始时间不为空，则大于开始时间
            return new Date(that.toolbarForm.startValue).getTime() > time.getTime();
          } else {//开始时间不选时，结束时间最大值大于等于当天时间
            return time.getTime() < Date.now() - 1000*3600*24
          }
        }
      }
    }
}