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-picker
  v-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');
  };