elementUI之时间日期选择器 + watch监听

最近做项目时用到element UI的时间日期选择器，由于是需要设置系统开放时间和关闭时间，所以用到了两个el-date-picker

问题1：需要对两个选择器的所能选的时间范围做限制

       限制1：开放时间不能早于当前时间且不能晚于关闭时间

       限制2：关闭时间不能早于当前时间且不能早于开放时间

解决：picker-options属性

代码：

//html
<el-form
        :model="setTimeForm"
        ref="setTimeForm"
        :rules="setTimeRules"
        :label-width="formLabelWidth"
      >
        <el-form-item label="开放时间" prop="openDate">
          <el-date-picker
            v-model="setTimeForm.openDate"
            size="mini"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择开放时间"
            time-arrow-control
            :picker-options="startOption"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="关闭时间" prop="closeDate">
          <el-date-picker
            v-model="setTimeForm.closeDate"
            size="mini"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择关闭时间"
            time-arrow-control
            :picker-options="endOption"
          ></el-date-picker>
        </el-form-item>
      </el-form>

//js中data部分
//开始时间范围
      startOption: {
        disabledDate: time => {
          if (this.setTimeForm.closeDate != "" && this.setTimeForm.closeDate != null) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > new Date(this.setTimeForm.closeDate)
            );
          } else {
            return time.getTime() < Date.now() - 8.64e7;  //- 8.64e7 今天不禁用
          }
        }
      },
      //关闭时间范围
      endOption: {
        disabledDate: time => {
          return (
            time.getTime() < new Date(this.setTimeForm.openDate) ||
            time.getTime() < Date.now() - 8.64e7  //- 8.64e7 今天不禁用
          );
        }
      },

问题2：但是，你会发现当清空选择器中值时，再次选择会出现没有时间范围可以选择

解决： 需要在watch监听选择器的值，当选择器清空后选择器值为null，导致选择器识别不了，而我们需要的是“”

代码：

//js中watch部分
watch:{
    'setTimeForm.openDate':{
      //设置深度监听，当openDate值发生变化时出发handler方法
      deep:true,
      //注意：这里的function不能写成箭头函数，不然this将不在此组件内 https://cn.vuejs.org/v2/api/#watch
      handler:function (newVal,oldVal) {
        if(newVal == '' || newVal == null){
          this.setTimeForm.openDate =='';
        }          
      }
    },
    'setTimeForm.closeDate':{
      //设置深度监听，当closeDate值发生变化时出发handler方法
      deep:true,
      //注意：这里的function不能写成箭头函数，不然this将不在此组件内 https://cn.vuejs.org/v2/api/#watch
      handler:function (newVal,oldVal) {
        if(newVal == '' || newVal == null){
          this.setTimeForm.closeDate =='';
        }          
      }
    },
  },