ElementUI实现开始时间和结束时间验证

Form表单中的开始日期和结束日期

前端开发过程中经常用到DatePicker日期选择器设置开始日期和结束日期，一般情况下开始时间不能大>于结束时间。

form表单中的开始日期和结束日期渲染如下代码所示：

 <el-form-item label="开始日期" prop="startTime">
                <el-date-picker
                  v-model="insertForm.startTime"
                  type="date"
                  placeholder="选择开始日期"
                  :picker-options="editStartOptions"
                ></el-date-picker>
 </el-form-item>
 <el-form-item label="结束日期" prop="endTime">
                <el-date-picker
                  v-model="insertForm.endTime"
                  type="date"
                  placeholder="选择结束日期"
                  :picker-options="editStopOptions"
                ></el-date-picker>
 </el-form-item>

使用picker–options属性设置如果选择了开始日期，再选择结束日期时，则结束日期下拉框中比开始日期小的日期禁止选择；
如果先选择结束日期，再选择开始日期时，则开始日期下拉框中比结束日期大的日期禁止选择。

实现效果如下所示：

校验代码如下：

data(){
 
 return{
 
   rules:{
            startTime: [
          {
            required: true,
            message: "请选择开始时间",
            trigger: ["blur", "change"]
          }
        ],
        endTime: [
          {
            required: true,
            message: "请选择结束时间",
            trigger: ["blur", "change"]
          }
        ]
    }
   
    editStartOptions: {
        disabledDate: time => {
          if (!this.insertForm.endTime) {
            return time.getTime() < new Date(1970 - 1 - 1).getTime();   //禁止选择1970年以前的日期
          } else {
            return time.getTime() > new Date(this.insertForm.endTime);
          }
        }
      },
      editStopOptions: {
        disabledDate: time => {
        //开始时间可以和结束时间相同增加
        let startTime= new Date(this.insertForm.startTime);
            startTime.setDate(startTime.getDate() - 1);
          return (
            time.getTime() < startTime || time.getTime() < new Date(1970 - 1 - 1).getTime()    //禁止选择1970年以前的日期
          );
        }
      },
 }
}