vue3使用<el-date-picker分别设置开始时间和结束时间时，设置开始时间晚于当前时间，开始时间早于结束时间，结束时间晚于开始时间
为避免出现填写结束事件后再次修改开始时间，导致开始时间晚于结束时间，添加 @change="handleChangeStartTime"
进一步进行时间校验
javascript
<el-date-picker
v-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-picker
v-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>
javascript
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位时间戳（毫秒级）
}