最终实现效果:
选择了开始时间,再选择结束时间的时候就不能早于开始时间;
选择了结束时间,再选择开始时间的时候就不能晚于结束时间;
1.png 2.png
实现代码:
<template>
<el-date-picker
type="date"
placeholder="选择开始日期"
v-model="beginTime"
value-format="yyyy-MM-dd"
:picker-options="pickerTimeBeg">
</el-date-picker>
-
<el-date-picker
type="date"
placeholder="选择结束日期"
v-model="endTime"
value-format="yyyy-MM-dd"
:picker-options="pickerTimeEnd">
</el-date-picker>
</template>
<script>
export default {
data() {
return{
beginTime:"",
endTime:"",
pickerTimeBeg: { //限制开始时间
disabledDate: (time) => {
if (this.endTime != '' && this.endTime) {
let timeStr = new Date(this.endTime.replace(/-/g, '/'));
return time.getTime() > timeStr;
} else {
return ''
}
}
},
pickerTimeEnd: { //限制结束时间
disabledDate: (time) => {
if (this.beginTime != '' && this.beginTime) {
let timeStr = new Date(this.beginTime.replace(/-/g, '/'));
return time.getTime() < timeStr;
} else {
return ''
}
}
}
}
}
}
</script>
网友评论