element-ui 限制选择当前之前的时间

<el-form :rules="rules" :model="ruleForm">
  <el-form-item prop="dateTime" label="时间">
    <el-date-picker
        v-model="ruleForm.dateTime"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期时间"
        :picker-options="pickerOptions"
    >
    </el-date-picker>
  </el-form-item>
</el-form>

1.配置element-ui组件的picker-options达到禁用效果

用户体验好，但只能限制日期不能限制时间

getTime() 指定的日期和时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数。
Date.now() 方法返回自 1970 年 1 月 1 日 00:00:00 (UTC) 到当前时间的毫秒数。
8.64e7 是科学计数法算出的值，实际为（8.64×10×10×10×10×10×10×10），也就是一天毫秒数。因为此需求是当天时间可以选中所以需要减去8.64e7，根据自身需求而定。

pickerOptions: {
  disabledDate: (time) => {
    // return time.getTime() < Date.now() //禁用今天以前的日期（包含今天）
    return time.getTime() < Date.now() - 8.64e7 //禁用今天以前的日期
    // return time.getTime()>Date.now()  //禁用今天以后的日期
    // return time.getTime()>Date.now()-8.64e7 //禁用今天以后的日期(包含今天)
  },
},

2.通过自定义校验规则

可以约束时间，但必须在表单中使用

data() {
  const validDateTime = (rule, value, callback) => {
    console.log(value)
    if (value) {
      if (new Date(value).getTime() < Date.now()) {
        callback(new Error("选择的时间必须大于当前时间"))
      } else {
        callback()
      }
    } else {
      callback(new Error('请选择时间'))
    }
  }
  return {
    ruleForm: {
      dateTime: ''
    },
    rules: {
      dateTime: [
        {required: true, validator: validDateTime, trigger: 'change'}
      ]
    }
   }
  }