element UI datepicker組件限制可選日期范圍

長話短說，簡單粗暴上代碼了，在element中的datepicker，可以自由選擇日期，如下：

 

然后我們根據element 官網的文檔，給datepicker組件動態改變 picker-options 中的 disableDate 即可對可選日期進行限制。如下：

<el-date-picker
   type="date"
   placeholder="選擇日期"
   v-model="start_time"
   style="width: 100%;"
   value-format="yyyy-MM-dd"
   :picker-options="startDateDisabled"
   @change="getStartTime"
   >
</el-date-picker>

 

data () {
  return {
        startDateDisabled: {},
        endDateDisabled: {}
   }                       
}

 

這里是我對開始日期和結束日期的限制條件：

created () {
　　// 限制開始日期不能超過當前日期
    this.startDateDisabled.disabledDate = function (time) {
      return (time.getTime() + 24 * 3600 * 1000) > Date.now()
    }
　　// 限制結束日期：當前日期往后的日期都不能選取
    this.endDateDisabled.disabledDate = function (time) {
      return time.getTime() > Date.now()
    }
  }

 

效果如下：

　　

　　因為我想要開始的日期是從今天及往后都不能選取，所以在time.getTime()后加一天的時間（即24*3600*1000），如果有其他的限制，根據自己的需要來進行調整即可