element ui 中有自帶的聯(lián)動選擇的日期限制销凑,可是有需求是要用2個選擇器贷痪,要求后一個選擇器的可選時間要根據(jù)前一個選擇器變化,前后選擇器范圍為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="結(jié)束日期"
: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();
}
}
},
})
上面代碼可以實現(xiàn)如開始時間是2018-6-01 那么結(jié)束時間可選范圍為2018-6-01到2018-6-30