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），若是有其餘的限制，根據本身的須要來進行調整便可