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>