element-ui el-date-picker 实现限制开始时间和结束时间

前提：在没有使用element-ui 时间组件的范围选择时，使用了单独的时间选择的情况下需要控制开始时间和结束时间的控制

        el-date-picker的属性中提供了 当前时间选择器的特有选项这个属性可以控制当前的选项有哪些

具体实现：

// dom结构
<el-date-picker
    v-model="formData.startTime"
    type="datetime"
    format="yyyy-MM-dd HH:mm:ss"
    value-format="yyyy-MM-dd HH:mm:ss"
    :picker-options="getDisabledTime(formData.endTime, 'start')"
    placeholder="请选择计划开始时间"
    style="width: 100%"
/>

<el-date-picker
    v-model="formData.endTime"
    type="datetime"
    format="yyyy-MM-dd HH:mm:ss"
    value-format="yyyy-MM-dd HH:mm:ss"
    :picker-options="getDisabledTime(formData.startTime, 'end')"
    placeholder="请选择计划结束时间"
    style="width: 100%"
/>

// 方法
getDisabledTime() {
  return (pTime, flag) => {
    return {
      disabledDate: (time) => {
        if (pTime === null || pTime === undefined || pTime === '') {
          return false
        } else {
          if (flag === 'start') {
            return dayJs(time).valueOf() > dayJs(pTime).valueOf()
          } else if (flag === 'end') {
            return dayJs(time).valueOf() < dayJs(pTime).add(1, 'day').valueOf()
          }
        }
      }
    }
  }
}

因为我的项目中还有其余的时间处理需求，在我的方法中使用了 dayJs插件进行了时间的计算，如果你没有安装 dayJs 的依赖，可以根据下面的方法进行处理

disabledDate: (time) => {
  if (pTime === null || pTime === undefined || pTime === '') {
    return false
  } else {
    const timeStr = new Date(pTime.replace(/-/g, '/'))
    if (flag === 'start') {
      return time.getTime() > timeStr 
    } else if (flag === 'end') {
      return time.getTime() < timeStr 
    }
  }
}

 推荐使用dayJs 去进行时间的处理