vue结合element-ui实现时间开始结束时间互斥

直接上代码~~

dom:

           <el-row>
                <el-col :span="12">
                  <el-date-picker v-model="dataForm.joinTimeStart"
                                  @change="changeDate"
                                  type="datetime"
                                  placeholder="选择开始时间"
                                  style="width:100%"
                                  :picker-options="pickerOptionsStart"
                                  :editable="false"
                                  value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-col>
                <el-col :span="12">
                  <el-date-picker v-model="dataForm.joinTimeEnd"
                                  style="width:100%"
                                  type="datetime"
                                  @change="changeDate"
                                  placeholder="选择结束时间"
                                  :picker-options="pickerOptionsEnd"
                                  :editable="false"
                                  value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-col>
              </el-row>

data:

data(){
      pickerOptionsStart: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        }
      },
      pickerOptionsEnd: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        }
      },    
}

method:

    changeDate () {
      let date1 = new Date(this.dataForm.joinTimeStart).getTime()
      let date2 = new Date(this.dataForm.joinTimeEnd).getTime()
      this.pickerOptionsStart = {
        disabledDate: (time) => {
          if (date2 != "") {
            return time.getTime() > Date.now() || time.getTime() > date2;
          } else {
            return time.getTime() > Date.now();
          }
        }
      }
      this.pickerOptionsEnd = {
        disabledDate: (time) => {
          return time.getTime() < date1 || time.getTime() > Date.now();
        }
      }
    }

实现效果