【Vue-UI框架開發技巧】Element UI 日期選擇器,限制只能選擇N天內
阿新 • • 發佈:2021-01-15
關鍵的配置:配置pickerOptions下的onPick和disabledDate
<el-date-picker v-model="dateRange" :picker-options="pickerOptions" type="daterange" range-separator="至" start-placeholder="開始日期" end-placeholder="結束日期"> </el-date-picker>
pickerOptions配置:
pickerMinDate:'', dateRange: [], pickerOptions:{ onPick: ({ maxDate, minDate }) => { this.pickerMinDate = minDate.getTime() if (maxDate) { this.pickerMinDate = '' } }, disabledDate: (time) => { if (this.pickerMinDate !== '') { const day5 = 5 * 24 * 3600 * 1000 let maxTime = this.pickerMinDate + day5 let minTime = this.pickerMinDate - day5 return time.getTime() > maxTime || time.getTime() < minTime } } },