Vue-element 日期校验 结束时间大于开始时间

1、定义templete

        <el-form-item :label="$t('execution.StartingTime')" prop="startDateTime">
          <el-date-picker
            v-model="startDateTime"
            type="datetime"
            placeholder="年/月/日 时:分:秒"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('execution.EndTime')" prop="endDateTime">
          <el-date-picker
            v-model="endDateTime"
            type="datetime"
            placeholder="年/月/日 时:分:秒"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>

2、定义校验规则

   rules() {
      const rules = {
        startDateTime: [
          { required: true, message: this.$t('clues.startDateTime'), trigger: 'change'},
        ],
        endDateTime: [
            { required: true, message: this.$t('clues.endDateTime'), trigger: 'change'},
            { validator: this.checkEndTime, trigger: 'change' }
        ]
      };
      return rules
    }

3、定义checkEndTime方法

 //校验结束时间
    checkEndTime(rule, value, callback) {
        if (!value) {
            callback(new Error("请选择结束时间"));
        } else {
            if (!this.startDateTime) {
                callback(new Error("请选择开始时间！"))
            } else if (Date.parse(this.startDateTime) >= Date.parse(value)) {
                callback(new Error("结束时间必须大于开始时间！"))
            } else {
                callback();
            }
        }
    }