Element plus日期选择器从今天开始、时间跨度为3天

如图所示，你要实现Element plus日期选择从今天开始、时间跨度为3天：

template代码如下：

<el-form :model="form" :rules="rules" label-position="left" label-width="140px" ref="formRef"><el-form-item label="预发部署时间" prop="time"><el-date-pickerv-model="form.time"type="daterange"start-placeholder="开始日期"end-placeholder="结束日期"format="YYYY-MM-DD"value-format="YYYY-MM-DD"clearable:disabled-date="disabledDate"/></el-form-item>
</el-form>

disabled-date属性只能实现日期选择从今天开始，Element plus没有提供日期选择器限制第二个日期的能力，所以限制时间跨度为3天的需求，你要通过el-form的自定义校验函数来实现，时间跨度超过3天时直接在表单项下方提示报错信息。

<script setup>
import dayjs from 'dayjs'const form = reactive({time: []
})const rules = reactive({time: [{ required: true, validator: createDateValidator, trigger: "change" }]
})// 校验器：时间跨度不能超过 3 天
const createDateValidator = (rule, value, callback) => {if (!value || value.length !== 2) {return callback(new Error("请选择时间范围"))}const [start, end] = value// 这里要把结果+1，dayjs返回的结果会少1天const diffDays = dayjs(end).diff(dayjs(start), "day") + 1 // 直接算天数差if (diffDays > 3) {callback(new Error("时间跨度不能超过3天"))} else {callback()}
}// 禁用今天之前的日期
const disabledDate = (time) => {const today = new Date()today.setHours(0, 0, 0, 0) // 把时分秒清零return time.getTime() < today.getTime()
}
</script>