vue-时间控件以及时间控件校验

:model 数据区域  :rules 规则校验
<el-form ref="form" :model="rulesForm" :rules="rules" label-width="30%">

1.同时出现两个日期选择列表
<el-form-item label="止期" prop="endTime">
              <el-date-picker
                v-model="rulesForm.endTime"
                type="daterange"
                unlink-panels
                style="width: 100%;"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            
2.每次出现一个日期选择列表
 <el-form-item label="保单止期">
              <el-date-picker 
                v-model="rulesForm.endDate1"
                style="width: 50%;"
                value-format="yyyy-MM-dd"
                placeholder="起期"
              ></el-date-picker>
              <el-date-picker
                v-model="rulesForm.endDate2"
                style="width: 50%;"
                value-format="yyyy-MM-dd"
                placeholder="止期"
              ></el-date-picker>
            </el-form-item>

检验规则 required必须录入  trigger什么时候校验
endDate1: [
          { required: true, message: "请选择保单止期起期", trigger: ["change", "blur"] }
        ],
        endDate2: [
          { required: true, message: "请选择保单止期止期", trigger: ["change", "blur"] }
        ]

校验方法
 this.$refs.form.validate(valid => {
        if (valid) {
          // this.rulesForm.endDate1 = this.rulesForm.endTime[0];
          // this.rulesForm.endDate2 = this.rulesForm.endTime[1];
          止期不能大于起期
          let timeFlag = new Date(this.rulesForm.endDate1).getTime() > new Date(this.rulesForm.endDate2).getTime()
          if(timeFlag){
            return this.$message({
                message: "保单止期信息录入有误，请检查录入信息!",
                type: "warning"
              });}