当前位置：首页 > news >正文

vue3使用＜el-date-picker分别设置开始时间和结束时间时，设置开始时间晚于当前时间，开始时间早于结束时间，结束时间晚于开始时间

news 来源：原创 2025/4/30 14:01:11

vue3使用<el-date-picker分别设置开始时间和结束时间时，设置开始时间晚于当前时间，开始时间早于结束时间，结束时间晚于开始时间

为避免出现填写结束事件后再次修改开始时间，导致开始时间晚于结束时间，添加 @change=“handleChangeStartTime”
进一步进行时间校验

<el-date-pickerv-else-if="item.type === 'datetimestart'"v-model="state.ruleForm[item.key]"type="datetime"format="YYYY-MM-DD HH:mm:ss"time-format="HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"v-bind="pickerOptions"placeholder="选择日期时间"@change="handleChangeStartTime"
>
</el-date-picker>
<el-date-pickerv-else-if="item.type === 'datetimeend'"v-model="state.ruleForm[item.key]"type="datetime"format="YYYY-MM-DD HH:mm:ss"time-format="HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"v-bind="pickerOptionsEnd"placeholder="选择日期时间"
>
</el-date-picker>

const handleChangeStartTime = () => {const startTime = convertToTimestamp(state.ruleForm.planStartTime);const endTime = convertToTimestamp(state.ruleForm.planEndTime);if (startTime > endTime) {ElMessage.warning('计划开始时间晚于计划结束时间，请重新添加计划开始时间或计划结束时间');}};/*** 生成一个数组* @param start* @param end*/const makeRange = (start: number, end: number) => {const result: number[] = [];for (let i = start; i <= end; i++) {result.push(i);}return result;};/*** 限制今天之前的时间不能选择（小时）*/const disabledHours = () => {let newVal = new Date(state.ruleForm.planStartTime);if (newVal &&newVal.getFullYear() == new Date().getFullYear() &&newVal.getMonth() == new Date().getMonth() &&newVal.getDate() == new Date().getDate()) {//如果为今天，则限制当前时间前的时间不能选择。return makeRange(0, new Date().getHours());}};/*** 限制今天之前的时间不能选择（分钟）* @param hour*/const disabledMinutes = () => {let newVal = new Date(state.ruleForm.planStartTime);if (newVal &&newVal.getFullYear() == new Date().getFullYear() &&newVal.getMonth() == new Date().getMonth() &&newVal.getDate() == new Date().getDate() &&newVal.getHours() == new Date().getHours()) {//如果为今天，则限制当前时间前的时间不能选择。return makeRange(0, new Date().getMinutes() - 1);}};/*** 限制今天之前的时间不能选择的配置*/const pickerOptions = computed(() => {return {// 限制今天之前的日期不能选择disabledDate(time: any) {return time.getTime() < Date.now() - 8.64e7;},// 限制今天之前的小时不能选择disabledHours,// 限制今天之前的分钟不能选择disabledMinutes,};});// 结束时间const pickerOptionsEnd = computed(() => {return {// 限制开始时间之前的日期不能选择disabledDate(time: any) {return time.getTime() < convertToTimestamp(state.ruleForm.planStartTime) - 8.64e7;},// 限制开始时间之前的小时不能选择disabledHours() {let newVal = new Date(state.ruleForm.planEndTime);const time = state.ruleForm.planStartTime;if (newVal &&newVal.getFullYear() == new Date(time).getFullYear() &&newVal.getMonth() == new Date(time).getMonth() &&newVal.getDate() == new Date(time).getDate()) {//限制开始时间前的时间不能选择。return makeRange(0, new Date(time).getHours() - 1);}},// 限制开始时间之前的分钟不能选择disabledMinutes() {let newVal = new Date(state.ruleForm.planEndTime);const time = state.ruleForm.planStartTime;if (newVal &&newVal.getFullYear() == new Date(time).getFullYear() &&newVal.getMonth() == new Date(time).getMonth() &&newVal.getDate() == new Date(time).getDate() &&newVal.getHours() == new Date(time).getHours()) {//限制开始时间前的时间不能选择。return makeRange(0, new Date(time).getMinutes() - 1);}},disabledSeconds() {let newVal = new Date(state.ruleForm.planEndTime);const time = state.ruleForm.planStartTime;if (newVal &&newVal.getFullYear() == new Date(time).getFullYear() &&newVal.getMonth() == new Date(time).getMonth() &&newVal.getDate() == new Date(time).getDate() &&newVal.getHours() == new Date(time).getHours() &&newVal.getMinutes() == new Date(time).getMinutes()) {//限制开始时间前的时间不能选择。return makeRange(0, new Date(time).getSeconds());}// return makeRange(0, new Date(time).getSeconds() - 1);},};});/*** 将某个时间转化成时间戳* 时间格式：2019-05-20 00:00:00 或 2019年5月1日 00:00:00* 返回值：1556640000000，13位时间戳*/// 示例日期字符串格式："2023-05-15 14:30:00"function convertToTimestamp(dateString: string) {// 处理iOS兼容性问题（将短横线替换为斜杠）const formattedDate = dateString.replace(/-/g, '/');const dateObj = new Date(formattedDate);return dateObj.getTime(); // 返回13位时间戳（毫秒级）}