vue3+element Plus实现日期选择器默认选中十五天之后的日期,并且不可选择今天之前的日期

发布于:2025-06-27 ⋅ 阅读:(19) ⋅ 点赞:(0)

效果图一(默认选中十五天之后的日期):

在这里插入图片描述

效果图二(不可选择今天之前的日期):

在这里插入图片描述

这里用到的是element Plus日期选择器设置默认十五天之后的时间,以及不可选择今天之前的时间。

整体代码如下:

<template>
	<div class="formList">
		<div class="formTitle">设置截止时间</div>
		<el-form :model="ruleForm" label-width="120px" class="demo-ruleForm" :inline="true">
			<el-form-item label="截止时间:" prop="endTime">
				<el-date-picker v-model="ruleForm.endTime" type="date" placeholder="请选择截止时间" :disabled-date="disabledDate" style="width: 300px" />
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

interface RuleForm {
	endTime: string;
}
const ruleForm = reactive<RuleForm>({
	endTime: '',
});
const disabledDate = (time: any) => {
	return time.getTime() < Date.now() - 8.64e7;
};
onMounted(() => {
	const date = new Date();
	date.setDate(date.getDate() + 15);
	ruleForm.endTime = date;
});
</script>

<style lang="scss" scoped>
.formList {
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
	height: 500px;
	.formTitle {
		font-weight: 500;
		font-size: 16px;
		color: #26bec9;
		margin: 30px 0;
	}
}
</style>

‌Time is the most valuable thing a man can spend.‌


网站公告

今日签到

点亮在社区的每一天
去签到