vue+element 日期选择器，开始时间和结束时间的问题

本文介绍: 在做项目的时候，经常会碰到开始时间和结束时间同时出现的问题，一般情况下，选定了开始时间，那么结束时间就不能小于开始时间，反之亦然。这里，绑定了使用:pi c k e r–options 绑定一个变量，在用户选择的时候，自动校准。element提供了一个日期选择器组件，可以根据自己想要的日期格式来自定义时间。

在做项目的时候，经常会碰到开始时间和结束时间同时出现的问题，一般情况下，选定了开始时间，那么结束时间就不能小于开始时间，反之亦然。

element提供了一个日期选择器组件，可以根据自己想要的日期格式来自定义时间。

&lt;el-form
  ref="submitForm"
  :model="submitForm"
  class="form-item table"
  label-width="120px"
  label-position="left"
&gt;
  <el-form-item label="开始时间" prop="startTime"&gt;
    <el-date-picker
      v-model="submitForm.startTime"
      type="date"
      placeholder="请输入开始时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      :picker-options="pickerOptionsStart"
    &gt;</el-date-picker&gt;
  </el-form-item>
  <el-form-item label="结束时间" prop="endTime">
    <el-date-picker
      v-model="submitForm.endTime"
      type="date"
      placeholder="请输入结束时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      :picker-options="pickerOptionsEnd"
    ></el-date-picker>
  </el-form-item>
</el-form>

这里，绑定了使用:picker-options 绑定一个变量，在用户选择的时候，自动校准。

完整代码：

<el-form
  ref="submitForm"
  :model="submitForm"
  class="form-item table"
  label-width="120px"
  label-position="left"
>
  <el-form-item label="开始时间" prop="startTime">
    <el-date-picker
      v-model="submitForm.startTime"
      type="date"
      placeholder="请输入开始时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      :picker-options="pickerOptionsStart"
    ></el-date-picker>
  </el-form-item>
  <el-form-item label="结束时间" prop="endTime">
    <el-date-picker
      v-model="submitForm.endTime"
      type="date"
      placeholder="请输入结束时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      :picker-options="pickerOptionsEnd"
    ></el-date-picker>
  </el-form-item>
</el-form>
<script>
export default {
  data() {
    return {
      // 开始结束日期限制
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.submitForm.endTime) {
            return (
              time.getTime() >= new Date(this.submitForm.endTime).getTime()
            );
          }
        }
      },
      // 结束日期限制
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.submitForm.startTime) {
            return (
              time.getTime() <= new Date(this.submitForm.startTime).getTime()
            );
          }
        }
      },
      submitForm: {
        startTime: '',
        endTime: ''
      }
    }
  }
}
</script>