element-ui组件使用两个日期选择器，开工时间不能大于竣工时间

项目场景：

element-ui组件使用两个日期选择器，提出需要的功能需求
保证开工时间不能大于竣工时间

---

问题描述

在必填时间项目中，使用的是element-ui日期选择插件，绑定的数据是父组件传递的参数，需要手动配置两个时间之间的规则

	<el-row>
        <el-col :span="12">
          <el-form-item label="开工时间" prop="kgsj">
            <el-date-picker v-model="bhzsqbbjz.kgsj" type="date" placeholder="选择日期时间" :picker-options="pickerOptions1"> </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="竣工时间" prop="jgrq">
            <el-date-picker v-model="bhzsqbbjz.jgrq" type="date" placeholder="选择日期时间" :picker-options="pickerOptions2"> </el-date-picker>
          </el-form-item>
        </el-col>
 	</el-row>

---

解决方案：

在上面的元素标签中添加:picker-options属性，用来给当前时间日期选择器定义方法，方法如下面的pickerOptions1，pickerOptions2

export default {
  props: {
    bhzsqbbjz: {
      type: Object,
      default: {}
    },
  },
  data() {
    return {
      pickerOptions1: {
        disabledDate: (time) => {
          return this.bhzsqbbjz.jgrq ? time.getTime() > this.bhzsqbbjz.jgrq.getTime() : false //只能选择竣工日期之前的日期
          //返回---结束时间是否有值？   可选时间小于结束时间   ：  任意时间都可选
        }
      },
      pickerOptions2: {
        disabledDate: (time) => {
          return this.bhzsqbbjz.kgsj ? time.getTime() < this.bhzsqbbjz.kgsj.getTime() : false //只能选择开工时间之后的日期
          //返回---开始时间是否有值？   可选时间大于开始时间   ：  任意时间都可选
        }
      }
    }
  },
}

注意事项：
1、disabledDate: (time)=>{}这里必须是箭头函数，否则找不到this
2、return 返回的值为false时，所有时间都可选，值为true时，所有时间都不可选
3、return time.getTime() < Date.now();
//这里的"<"表示可选时间大于当前时间，反之同理