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

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位时间戳(毫秒级)
	}
相关推荐
亿坊电商2 分钟前
VUE混合开发,选哪个PHP框架最顺手?
前端·vue.js·php
新人11yj410 分钟前
如何给网页增加滚动到顶部的功能
前端·javascript
掘金一周10 分钟前
Figma Dev Mode MCP:大人,时代变了 | 掘金一周7.10
前端·人工智能·mcp
Data_Adventure15 分钟前
推荐几款开源 Canvas 和 WebGL 图形库
前端·webgl·canvas
我爱加班、、29 分钟前
element-plus表单校验失败问题
前端·javascript·vue.js·elementui·ecmascript
香香甜甜的辣椒炒肉34 分钟前
vue快速上手
前端·javascript·vue.js
b1gbrother1 小时前
让你的Claude Code变得更聪明
前端·程序员
国家不保护废物1 小时前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
用户2519162427111 小时前
Canvas之概述,画布与画笔
前端·javascript·canvas
南方kenny1 小时前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试