vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天

el-date-picker日期选择器校验规则-选择日期范围不能超过七天

效果

ps注意：

三个位置

:rules="rules" ref="formRef"

prop="flightDate"

<template>...省略<el-form :model="queryForm" :rules="rules" ref="formRef" label-width="85"><el-form-item label="时间范围:" prop="flightDate"> <el-date-pickerv-model="queryForm.date"type="daterange"start-placeholder="选择开始时间"end-placeholder="选择结束时间"@change="onDateChange"/></el-form-item>
</el-form>...省略
</template>

<script setup lang="ts">//...省略const queryForm = ref({date: [dayjs().subtract(1, 'day').toDate(), dayjs().toDate()],});const formRef = ref();// 添加验证函数const validateDateRange = (_rule: any, value: [Date, Date], callback: (error?: string) => void) => {if (!value || value.length !== 2) {callback('请选择完整的日期范围');return;}const [start, end] = value;const diffDays = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));console.log(diffDays);if (diffDays > 7) {callback('时间范围不能超过7天');} else {callback();}};const rules = {flightDate: [{validator: validateDateRange,trigger: 'change',},],};const onDateChange = () => {formRef.value?.validateField('flightDate');};