### Vue element 日期選擇器 el-date-picker自定義可選范圍 #### 需求：防止時間范圍內的查詢到數據過多，希望設置最大可選一周的是時間范圍 #### 完成效果：見下圖  > HTML頁面 ``` el-form-item label="訂單時間"> <el-date-picker v-model="formData.time" type="daterange" range-separator="至" start-placeholder="開始日期" end-placeholder="結束日期" :picker-options="pickerOptions" value-format="timestamp"> </el-date-picker> </el-form-item> ``` #### 查看官方文檔，disabledDate中，time.getTime() 的范圍既是禁用的時間范圍 > 此處為官方文檔 ``` pickerOptions: { disabledDate(time) { return time.getTime() > Date.now(); }, } ``` #### 知道了怎么禁用時間，想要達到預期的效果，要拿到第一次選擇的日期 #### [](#查看element文檔onpick可返回每次選中的時間)查看element文檔，onPick可返回每次選中的時間 ``` pickerOptions：{ disabledDate(time) { //..設置禁用狀態，參數為當前日期，要求返回 Boolean let timeOptionRange = vue.timeOptionRange; let secondNum = 60*60*24*7*1000; if(timeOptionRange){ return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum ; } }, onPick(time){ //..選中日期后會執行的回調 if(time.minDate && !time.maxDate){ //..當第一時間選中才設置禁用 vue.timeOptionRange = time.minDate; } if(time.maxDate){ vue.timeOptionRange = null; } } } ``` #### 此處有個知識點，在 onPick 和 disabledDate 直接用 this 拿到的是 el-date-picker 實例 #### 查了下資料，如下可獲取組件的 vue 實例 ``` data(){ var vue = this; return {} } ```