vue2+elementUi的两个el-date-picker日期组件进行联动
<template>
<el-form>
<el-form-item label="起始日期">
<el-date-picker v-model="form.startTime" @change="startTimeChange" :picker-options="startTimePickerOptions" type="date" placeholder="请选择" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable></el-date-picker>
</el-form-item>
<el-form-item label="截止日期">
<el-date-picker v-model="form.endTime" @change="endTimeChange" :picker-options="endTimePickerOptions" type="date" placeholder="请选择" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable></el-date-picker>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
startTime: "",
endTime: "",
},
startTimePickerOptions: {},
endTimePickerOptions: {},
}
},
methods: {
startTimeChange() {
// 先将值转换为时间戳
const startTime = new Date(this.form.startTime).getTime();
this.endTimePickerOptions = {
disabledDate: (time) => {
if (startTime !== 0) {
// return time.getTime() < startTime - 86400000 // 减1天就可以选择与开始时间相同日期
return time.getTime() < startTime
}
}
}
},
endTimeChange() {
// 先将值转换为时间戳
const endTime = new Date(this.form.endTime).getTime();
this.startTimePickerOptions = {
disabledDate: (time) => {
if (endTime !== 0) {
// return time.getTime() > endTime // 不减1天可以选择与结束时间相同日期
return time.getTime() > endTime - 86400000
}
}
}
},
}
}
</script>
结果