el-date-picker 设置开始时间晚于当前时间(包含时分秒的处理)

el-date-picker 设置开始时间早于当前时间(包含时分秒的处理)

<el-date-picker
	v-else-if="item.type === 'datetimestart'"
	v-model="state.ruleForm[item.key]"
	type="datetime"
	format="YYYY-MM-DD HH:mm:ss"
	value-format="YYYY-MM-DD HH:mm:ss"
	v-bind="pickerOptions"
	placeholder="选择日期时间"
	@change="handleChangeStartTime"
>
	/**
	 * 生成一个数组
	 * @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,
		};
	});

你可能感兴趣的:(vue,前端,element,vue.js,前端,javascript)