效果
思路
查阅elemnet plus官网，日期时间选择器type="datetimerange"这个选中开始时间并没有对应事件会被触发，因此思路更换成type="datetime"的两个组成一起可以通过监听开始时间v-model的值变化更新结束时间的值。
代码
日期时间选择器
<template><div class="dataStyle"><el-date-picker v-model="startTime" type="datetime" class="startStyle" placeholder="请选择开始时间":disabled-date="disabledFutureDate" />-<el-date-picker v-model="endTime" type="datetime" class="endStyle" placeholder="请选择结束时间":disabled-date="disabledEndDate" /></div>
</template><script setup>
import { ref, watch } from 'vue';// 定义开始时间和结束时间
const startTime = ref('');
const endTime = ref('');// 禁用未来日期
const disabledFutureDate = (time) => {const now = new Date();// 禁用当天 23:59:59 之后的时间const endOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);return time.getTime() > endOfToday.getTime();
};// 自动设置结束时间为开始时间的 30 分钟后
watch(startTime, (newStartTime) => {if (newStartTime) {const start = new Date(newStartTime); // 将开始时间转换为日期对象const newEndTime = new Date(start.getTime() + 30 * 60 * 1000); // 增加30分钟endTime.value = newEndTime; // 设置结束时间}
});
//允许结束时间只能大于或等于开始时间
const disabledEndDate = (time) => {if (!startTime.value) return disabledFutureDate(time);const start = new Date(startTime.value);return time.getTime() < start.getTime() || disabledFutureDate(time);
};
</script>
<style lang="scss">
.startStyle,
.endStyle {.el-input__wrapper {border-radius: 0;box-shadow: none}
}
</style><style lang="scss" scoped>
.dataStyle {background-color: #fff;width: 24rem;display: flex;.startStyle .endStyle {width: 12rem;}
}
</style>
日期选择器
<template><div class="parentStyle"><el-date-picker class="leftStyle" popper-class="leftPopper" v-model="form.startTime" type="date":disabled-date="disabledDateStart" placeholder="选择开始日期" />-<el-date-picker class="rightStyle" popper-class="rightPopper" v-model="form.endTime" type="date":disabled-date="disabledDate" placeholder="选择结束日期" /></div></template><script setup>
import dayjs from "dayjs";
import { reactive, watch } from "vue";
const form = reactive({startTime: "",endTime: ""
});
watch(() => form.startTime, (newValue, oldValue) => {if (newValue) {const start = dayjs(newValue)form.endTime = new Date(start.add(1, 'day').toISOString()) // 使用 ISO 8601 格式console.log(form);}
})
const disabledDateStart = (time) => {return time.getTime() > Date.now();
}
const disabledDate = (time) => {if (!form.startTime) {return false; // 若未选择开始时间，不禁用任何日期}return time.getTime() < form.startTime;
}</script>
<style lang="scss">
.leftStyle,
.rightStyle {.el-input__wrapper {border-radius: 0;box-shadow: none}
}.leftPopper {}.rightStyle {}
</style><style lang="scss" scoped>
.parentStyle {background-color: #fff;width: 20rem;display: flex;align-items: center;justify-content: space-between;border-radius: 5rem;.leftStyle,.rightStyle {width: 9rem;}
}
</style>
