iview 中日期选择器限制选择区间的方法
<template>
<div>
<Date-picker v-model="startTime"
:options="startTimeOption"
@on-change="onStartTimeChange"
type="date"
placeholder="选择开始日期">
</Date-picker>
<Date-picker v-model="endTime"
:options="endTimeOption"
@on-change="onEndTimeChange"
type="date"
placeholder="选择结束日期" >
</Date-picker>
</div>
</template>
<script>
import moment from 'moment'
mounted(){
this.startTime = moment().subtract(3, "days").format("YYYY-MM-DD");
this.endTime = moment().format("YYYY-MM-DD");
let vm = this;
this.startTimeOption = {
disabledDate(startTime) {
return (
startTime > new Date(vm.endTime) || startTime > Date.now()
);
}
};
this.endTimeOption = {
disabledDate(endTime) {
return (
endTime < new Date(vm.startTime)
);
}
};
},
data(){
return{
startTime :"",
endTime:"",
startTimeOption: {},
endTimeOption:{}
}
},
methods:{
onStartTimeChange(startTime, type) {
this.endTimeOption = {
disabledDate(endTime) {
return (
endTime < new Date(startTime)
);
}
};
},
onEndTimeChange(endTime, type) {
this.startTimeOption = {
disabledDate(startTime) {
return (
startTime > new Date(endTime) || startTime > Date.now()
);
}
};
},
}
</script>