element-ui時間選擇器--設置禁止選擇的時間

場景需求：開始日期不能小於今天，在今天之前的日期禁止選擇，結束日期不能小於開始日期，開始日期之前的日期禁止選擇。

效果圖：

element-ui的時間選擇器中，有一個picker-options的屬性，屬性值中有個disabledDate可以設置禁用狀態，類型為函數，參數為今天日期，通過返回Boolean值來確定日期是否可以選擇。

因此，開始日期可以通過picker-options這個屬性去設置禁用選項：

setStartDate(){
          let time = this.getDate()//把當天時間轉化為yyyy-MM-dd格式的方法
          let self = this
          let obj = Object.assign({},this.startDateLimit,{
            disabledDate:function(date){
              return self.getDate(date) < time
            }
          })
          return obj
        },
...

當選擇完開始日期后，開始選擇結束日期了，這時可以通過已經選擇的開始日期來設置結束日期的禁選項。

在開始日期的選擇器上綁定change事件，開始日期發生改變就可以立刻改變結束日期的禁選項。

changeEnd(){
          //如果已經存在結束日期
          if(this.form.endDate){
            if(this.form.beginDate > this.form.endDate){
              this.form.endDate = ''
              this.$message.warning('結束日期小於開始日期，請重新選擇')
              return ;
            }
          }

          //如果結束日期尚未選擇
          if(!this.form.beginDate){
            this.$message.warning('請先選擇開始日期')
            this.endDateLimit = Object.assign({},this.endDateLimit,{
              disabledDate:(date)=>{
                return true
              }
            })
          }else{
            let self = this
            this.endDateLimit = Object.assign({},this.endDateLimit,{
              disabledDate:(date)=>{
                return self.getDate(date) < this.form.beginDate
              }
            })
          }
        },

html代碼：

 <el-date-picker
          size="mini"
          class="s-form"
          v-model="form.beginDate"
          type="date"
          @change="changeEnd"
          :picker-options="startDateLimit"
          clearable
          value-format="yyyy-MM-dd"
          placeholder="選擇開始日期">
        </el-date-picker>
      -
        <el-date-picker
          v-model="form.endDate"
          class="s-form"
          :picker-options="endDateLimit"
          @focus="changeEnd"
          @change="setTime"
          type="date"
          clearable
          size="mini"
          value-format="yyyy-MM-dd"
          placeholder="選擇結束日期">
        </el-date-picker>