el-form 表格校验 开始和结束时间，时间选择范围

<el-form
        ref="generateForm"
        :model="generateForm"
        :rules="generateRules"
        label-width="120px"
      >
 <el-form-item>
  <template slot="label">
            <span class="required-asterisk">*</span>
            <span>数据周期</span>
          </template>
          <el-col :span="8">
            <el-form-item prop="periodBegin">
              <el-date-picker
                v-model="generateForm.periodBegin"
                type="date"
                style="width: 135px"
                placeholder="开始日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="datePickerOptions"
              />
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="8">
            <el-form-item prop="periodEnd">
              <el-date-picker
                v-model="generateForm.periodEnd"
                type="date"
                style="width: 135px"
                placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="datePickerOptions"
              />
            </el-form-item>
          </el-col>
          
        </el-form-item>
</el-form>
.required-asterisk {
  color: #f56c6c;
  margin-right: 4px;
}

data() {
    const validatePeriodRangeStart = (rule, value, callback) => {
      
      const begin = this.generateForm.periodBegin;
      const end = this.generateForm.periodEnd;
      if (!begin) return callback(new Error("请选择开始日期"));

      const beginTime = new Date(begin).getTime();
      const endTime = new Date(end).getTime();
      if (Number.isNaN(beginTime)) {
        return callback(new Error("日期格式不正确"));
      }
      if (beginTime > endTime)
        return callback(new Error("开始日期不能晚于结束日期"));

      return callback();
    };
    const validatePeriodRangeEnd = (rule, value, callback) => {
     
      const begin = this.generateForm.periodBegin;
      const end = this.generateForm.periodEnd;
      if (!end) return callback(new Error("请选择结束日期"));

      const beginTime = new Date(begin).getTime();
      const endTime = new Date(end).getTime();
      if (Number.isNaN(endTime)) {
        return callback(new Error("日期格式不正确"));
      }
      if (beginTime > endTime)
        return callback(new Error("开始日期不能晚于结束日期"));

      return callback();
    };
    return {
      loading: false,
      generateForm: {
        statsTime: "",
        periodBegin: "",
        periodEnd: "",
      },
      generateRules: {
        periodBegin: [{ validator: validatePeriodRangeStart, trigger: "change" }],
        periodEnd: [{ validator: validatePeriodRangeEnd, trigger: "change" }],
       
      },
      reportList: [],
      datePickerOptions: {
        disabledDate: (date) => {
          return date && date > new Date();
        },
      },
      monthPickerOptions: {
        disabledDate: (date) => {
          // 仅允许选择"上一个月"及更早的月份
          const now = new Date();
          const lastMonthStart = new Date(
            now.getFullYear(),
            now.getMonth() - 1,
            1
          );
          return date && date.getTime() > lastMonthStart.getTime();
        },
      },
    };
  },

饿了么文档原生案例

<el-form-item label="活动时间" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>

ruleForm: {
          date1: '',
          date2: '',
        },

rules: {
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
         
        }