element-ui限制开始日期和结束日期

一、需求

• 开始时间
• 限制开始时间不能为空
• 开始时间不能小于当前时间
• 结束时间
• 限制结束时间不能为空
• 结束时间不能小于开始时间

二、分析

看了很多方法都是通过:picker-options禁用选项，很难完全控制日期时间控件的选择，有很多BUG，比如限制选择今天但是点击此刻可以更改时分秒，onChange弹出message又和表单不太相符，最后决定用自定义效验解决。

三、效验代码

表单代码

        <el-form-item label="直播开始时间" prop="startTime">
          <el-date-picker clearable size="small"
                          v-model.trim="form.startTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择开始时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="直播结束时间" prop="endTime">
          <el-date-picker clearable size="small"
                          v-model.trim="form.endTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择结束时间"
          >
          </el-date-picker>
        </el-form-item>

 自定义效验代码

          startTime: [
            { required: true,  trigger: "blur" ,validator: startTimeRule, }
          ],
          endTime: [
            { required: true,  trigger: "blur" ,validator: endTimeRule,}
          ],

自定义效验函数

data() {
      let startTimeRule = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('开始时间不能为空'));
        }
          let currentTime = new Date();
          let time=this.form.startTime;
          time= time.replace("-","/");//替换字符，变成标准格式
          time= new Date(Date.parse(time));
          if(time < currentTime) {
            return callback(new Error('开始时间不能小于当前时间'));
            // this.$message.error("开始时间不能小于当前时间")
            this.form.startTime=null
          }else{
            callback();
          }
      };
      let endTimeRule = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('结束时间不能为空'));
        }else{
          let startTime=this.form.startTime;
          startTime= startTime.replace("-","/");//替换字符，变成标准格式
          startTime= new Date(Date.parse(startTime));
          let endTime=this.form.endTime;
          endTime= endTime.replace("-","/");//替换字符，变成标准格式
          endTime= new Date(Date.parse(endTime));
          if(endTime < startTime) {
            return callback(new Error('结束时间不能小于开始时间'));
            // this.$message.error("结束时间不能小于开始时间")
            this.form.endTime=null
          }else{
            callback();
          }
        }

      };
  }

四、效果演示

开始时间限制

结束时间限制