效果图一(默认选中十五天之后的日期):
效果图二(不可选择今天之前的日期):
这里用到的是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.