element ui 中有自带的联动选择的日期限制,可是有需求是要用2个选择器,要求后一个选择器的可选时间要根据前一个选择器变化,前后选择器范围为1个月
//2个选择器
<el-date-picker
v-model="time1"
type="date"
placeholder="开始日期"
:picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
v-model="time2"
type="date"
placeholder="结束日期"
:picker-options="pickerOptions1">
</el-date-picker>
//data中定义
let vm = new Vue({
el: "#CustomerReport",
data: {
time1:'',
time2:'',
pickerOptions0: {
disabledDate: (time) => {
if (vm.time2 != "") {
let currentTime = vm.time2;
let threeMonths = currentTime.setMonth(currentTime.getMonth()-1);
currentTime.setMonth(currentTime.getMonth()+1)
return time.getTime() > vm.time2 || time.getTime() < threeMonths ;
} else {
return time.getTime() > Date.now();
}
}
},
pickerOptions1: {
disabledDate:(time) => {
if( vm.time1 != ""){
let currentTime = vm.time1;
let threeMonths = currentTime.setMonth(currentTime.getMonth()+1);
currentTime.setMonth(currentTime.getMonth()-1)
return time.getTime() < vm.time1 || time.getTime() > threeMonths ;
}else {
return time.getTime() > Date.now();
}
}
},
})
上面代码可以实现如开始时间是2018-6-01 那么结束时间可选范围为2018-6-01到2018-6-30
网友评论