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

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

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

<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>

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位时间戳（毫秒级）
	}