基于element-ui时间选择器，禁止选择重复时间段

业务上遇到这样一个需求。设置系统功能维护时间，选择一个时间区间后，其余时间不能和该时间段有任何重复。 需求如下: 对比开始时间与结束时间的时间，在这个区间有重复的就不可以输入 刚开始的思路是分别做判断，这三种情况下是校验不通过的

后面觉得这个思路是有问题的，反过来思考。输入的起始时间小于已存在的结束时间且输入的结束时间大于已存在的开始时间，就一定会在这个时间范围内。 以下是代码： 1.Vue2使用element-ui的el-date-picker组件，设置成年月日时分秒选择区间后。

 <el-from>
      <el-form-item
                :label="`维护时间${indexTime + 1}`"
                :prop="'list.' + indexTime + '.timer'"     // 这里由于是数组遍历，不能写死
                :rules="rules.timer"                       //  规则一样可以写死
              >
                <el-date-picker
                  :default-time="['00:00:00', '23:59:59'] "  // 设置起始值的默认时分秒
                  v-model="itemTime.timer"     // 绑定值
                  type="datetimerange"    // 设置成时间段选择
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"    // 输入规则限制
                >
                </el-date-picker>
      </el-form-item>
  </el-form>

js校验规则：

const validateTime = (rule, value, callback) => {
      const val = value ? value.every((item) => item) : false;   // 时间段输入的是一个数组  清空后会返回null.所以这里需要判断一下。
      if (val) {
        const list = [];
          this.list.map((item) => {
            if (
              dayjs(value[0]).isSameOrBefore(item.timer[1]) &&
              dayjs(value[1]).isSameOrAfter(item.timer[0])
            ) {
              list.push(true);
            }
          });
        list.length > 1 ? callback(new Error("维护时间不可重复")) : callback();
      } else {
        callback(new Error("维护时间不能为空"));
      }
    };

由于是可以选择时间段，自己输入的不用校验自己，所以数组中push的值只要有两个重复或重复以上的，就可以判定是重复了。 建议使用dayjs插件，非常好用，而且内存也只有2kb。isSameOrBefore这里的方法是dayjs提供的校验方法，判断某一时间是否等于或在某时间之前；isSameOrAfter用来判断某一时间是否等于或在某时间之后；具体用法大家可以参看dayjs的文档说明 这样就可以完成对时间选择段不能重复的校验了。