element的选择日期组件里没有像移动端vant直接设置max-date的api，因此在不能动态设置选择的第二个时间(需要分别选择起止时间和结束时间，但可以加上关联)，
看了很多博客有的效果直接出不来要不就是不完全自己的需求，自己摸索看了写文档终于实现了（帮后台写的，等写完后台需求已经不需要了，记录下笔记，例子范围是7天）
效果：有点击事件，没有gif：
<!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>