element UI 日期date-picker组件日期格式转化后限制时间范围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"
            value-format="yyyy-MM-dd"
            placeholder="选择开放时间"
            :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"
            value-format="yyyy-MM-dd"
            placeholder="选择关闭时间"
            :picker-options="endOption"
          ></el-date-picker>
        </el-form-item>
 </el-form>

由于设置了value-format="yyyy-MM-dd"，picker-options设置时间范围失效

//js的data部分
//开始时间范围
      startOption: {
        disabledDate: time => {
          if (this.setTimeForm.closeDate != "") {
            return (
              time.getTime() < Date.now()|| time.getTime() > this.setTimeForm.closeDate
            );
          } else {
            return time.getTime() < Date.now();
          }
        }
      },
      //关闭时间范围
      endOption: {
        disabledDate: time => {
          return (
            time.getTime() < this.setTimeForm.openDate || time.getTime() < Date.now()
          );
        }

解决方法：在比较时间时，需要将数据格式转化成date格式：new Date()

//js部分
//开始时间范围
      startOption: {
        disabledDate: time => {
          if (this.setTimeForm.closeDate != "") {
            return (
              time.getTime() < Date.now()  ||
              time.getTime() > new Date(this.setTimeForm.closeDate)
            );
          } else {
            return time.getTime() < Date.now() ;
          }
        }
      },
      //关闭时间范围
      endOption: {
        disabledDate: time => {
          return (
            time.getTime() < new Date(this.setTimeForm.openDate) ||
            time.getTime() < Date.now()
          );
        }
      },

成功界面1：先设置开始时间，则结束时间只能在开始时间之后的范围选择

成功界面2：先设置结束时间，则开始时间只能在当前时间至结束时间范围内选择

踩坑记录！！！！