element的選擇日期組件里沒有像移動端vant直接設置max-date的api，因此在不能動態設置選擇的第二個時間(需要分別選擇起止時間和結束時間，但可以加上關聯)，
看了很多博客有的效果直接出不來，有的代碼格式看不懂要不就是不完全符合自己的需求，自己摸索看前人可取的方法終於實現了（幫后台寫的，等寫完后台需求已經不需要了，記錄下筆記，例子范圍是7天）
效果：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <el-date-picker v-model="value1" type="date" placeholder="開始日期" value-format="timestamp" :picker-options="pickerOptions0"> </el-date-picker> <el-date-picker v-model="value2" type="date" placeholder="結束日期" value-format="timestamp" :picker-options="pickerOptions1"> </el-date-picker> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data(){ return { value1:'', value2:'', maxLength:7, //設置兩個日期的最大間隔 pickerOptions0: { disabledDate:(time)=>{ if(this.value2!=''){ //console.log(this.value2) //清除結束日期時this.value2的值為null if(this.value2===null){ return time.getTime() < Date.now(); }else{ let lastTime = this.value2-this.maxLength*24*3600*1000 + 8.64e7 return time.getTime() > this.value2 || time.getTime() < lastTime } }else{ return time.getTime() < Date.now(); //將比當前時間還早的時間不可選 } } }, pickerOptions1: { disabledDate:(time)=>{ if(this.value1!=''){ let nextTime = this.value1+this.maxLength*24*3600*1000 - 8.64e7 return time.getTime() < this.value1||time.getTime() > nextTime; }else{ return time.getTime() < Date.now() } } }, } }, }) </script> </html>