在vue中对elementUi日期选择器做限制

要对日期选择加限制，需要加上picker-options字段，值为object。 object中disabledDate函数用来设置禁用状态，参数为当前日期，要求返回 Boolean，true为禁选，false可选

限制代码

<div class="search_time">
  <span class="texts">起始时间:</span>
  <el-date-picker
    v-model="searchForm.startTime"
    size="small"
    type="date"
    placeholder="起始时间"
    value-format="yyyy-MM-dd"
    style="margin-left: 10px"
    :picker-options="pickerOptionsStart"
  >
  </el-date-picker>
</div>
<div class="search_time">
  <span class="texts">结束时间:</span>
  <el-date-picker
    v-model="searchForm.endTime"
    type="date"
    size="small"
    value-format="yyyy-MM-dd"
    placeholder="结束时间"
    style="margin-left: 10px"
    :picker-options="pickerOptionsEnd"
  >
  </el-date-picker>
</div>
***************************************
computed: {
  pickerOptionsEnd() {
    let _this = this
    return {
      disabledDate(time) {
      //结束日期不能大于今天并且不能小于开始日期
        let boolean1 = time.getTime() > Date.now() || time.getTime() < new Date(_this.searchForm.startTime).getTime()
        return boolean1
      }
    }
  },
  pickerOptionsStart() {
    let _this = this
    return {
      disabledDate(time) {
      //判断有没有选择结束日期
        if(_this.searchForm.endTime){
        //开始日期不能大于等于结束日期
          return time.getTime() > new Date(_this.searchForm.endTime).getTime() - 8.64e7
        }else{
        //开始日期不能大于等于今天日期
          return time.getTime() > Date.now()- 8.64e7
        }
      }
    }
  }
},

默认筛选近一个月

/** 默认搜索时间一个月*/
defaultTime() {
  Array.prototype.slice.apply(arguments).forEach(item => {
    let time = new Date(item),
      year = time.getFullYear(),
      month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1,
      date = time.getDate()
    if (!this.searchForm.startTime) {
      this.searchForm.startTime = `${year}-${month}-${date}`
    } else {
      this.searchForm.endTime = `${year}-${month}-${date}`
    }
  })
}
this.defaultTime(+new Date() - 8.64e7 * 30, +new Date())