el-date-picker开始结束日期相互限制

官网对于picker-options的定义及参数：

 

 实现：

        实现开始日期结束日期的关键点在于，要以对方的选择日期为条件，防止报错，必须判断是否为空。

        HTML

<el-form-item class="row_item_time" label="期限：" prop="contractStartTime">
    <el-col :span="11">
      <el-form-item prop="contractStartTime">
          <el-date-picker :picker-options="pickerOptions0" value-format="yyyy-MM-dd HH:mm:ss" :disabled="mark==='look'" type="date" placeholder="选择日期" v-model="formData.contractStartTime" style="width: 50%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">——</el-col>
    <el-col :span="11">
      <el-form-item prop="contractEndTime">
          <el-date-picker :picker-options="pickerOptions1" value-format="yyyy-MM-dd HH:mm:ss" :disabled="mark==='look'" type="date" placeholder="选择日期" v-model="formData.contractEndTime" style="width: 50%;"></el-date-picker>
      </el-form-item>
    </el-col>
</el-form-item>

        data中的数据

<script>
export default{
    data(){
        return{
            pickerOptions0: {
                disabledDate: (time) => {
                  if (this.formData.contractEndTime != "") {
                    return time.getTime() > new Date(this.formData.contractEndTime).getTime();
                  }
                }
              },
              pickerOptions1: {
                disabledDate: (time) => {
                     if (this.formData.contractStartTime != "") {
                    return time.getTime() < new Date(this.formData.contractStartTime).getTime();
                  }
                }
              },
        }
    }
}
</script>