Element日期时间选择器DateTimePicker 实现时分控制

贴一个语雀的地址：DateTimePicker 日期时间选择器 时分处理

el-date-picker

组件网址： https://element.eleme.cn/#/zh-CN/component/datetime-picker
组件方法只能限制日期； 可选择今天及今天之后。

现在需求

element的el-date-picker组件实现 只可选择当时之后的时间，包括时分，否则禁用不可选。

时分要怎么做限制？

实现代码

vue2

template

条件写在 takeEffectPickerOptions 和 loseEffectPickerOptions， 日期跟时分分别写方法控制。

<el-form-item label="生效时间" prop="takeEffectTime">
  <el-date-picker
    v-model="addNewForm.takeEffectTime"
    type="datetime"
    placeholder="请选择生效时间"
    style="width: 100%;"
    value-format="yyyy-MM-dd HH:mm:ss"
    :picker-options="takeEffectPickerOptions"
  >
    <!-- :default-time="defaultTimeVal" -->
  </el-date-picker>
  <div class="tooltip">
    <i class="el-icon-warning-outline"></i>不可早于当前时间
  </div>
</el-form-item>

<el-form-item label="失效时间" prop="loseEffectTime">
  <el-date-picker
    v-model="addNewForm.loseEffectTime"
    type="datetime"
    placeholder="请选择失效时间"
    style="width: 100%;"
    value-format="yyyy-MM-dd HH:mm:ss"
    :picker-options="loseEffectPickerOptions"
  >
    <!-- :disabled="!addNewForm.takeEffectTime" -->
  </el-date-picker>
  <div class="tooltip">
    <i class="el-icon-warning-outline"></i>不可早于生效时间
  </div>
</el-form-item>

data()

data() {
    return {
   	  takeEffectSelectableRange: [], // DateTimePicker 时分限制
      loseEffectSelectableRange: []
    }
}

watch

监听生效时间和失效时间的变化（主要监听是否选择当天日期），更新时间选择器的范围。
如果失效时间已填，然后改了生效时间 且 生效时间>失效时间，则失效时间自动设置为跟生效时间一样。this.addNewForm.loseEffectTime = newTakeEffectTime;

 watch: {
  'addNewForm.takeEffectTime': function(newTakeEffectTime) {
    // 知道日期后，动态的设定是否需要什么样的时间范围
    this.takeEffectSelectableRange = this.takeEffectTimeRange(
      newTakeEffectTime
    );
    // 存在失效时间，且 生效时间>失效时间
    if (
      this.addNewForm.loseEffectTime &&
      newTakeEffectTime > this.addNewForm.loseEffectTime
    ) {
      this.addNewForm.loseEffectTime = newTakeEffectTime;
    }
  },
  'addNewForm.loseEffectTime': function(newLoseEffectTime) {
    this.loseEffectSelectableRange = this.loseEffectTimeRange(
      this.addNewForm.loseEffectTime
    );
  }
},

computed

写 takeEffectPickerOptions 和 loseEffectPickerOptions；
disabledDate 控制日期的选择范围, selectableRange 控制时分；

computed: {
  // 生效时间限制，disabledDate控制日期的选择范围, selectableRange 控制时分
  takeEffectPickerOptions() {
    return {
      disabledDate: this.takeEffectDisabledDate,
      selectableRange: this.takeEffectSelectableRange
    };
  },
  // 失效时间限制
  loseEffectPickerOptions() {
    return {
      disabledDate: this.loseEffectDisabledDate,
      selectableRange: this.loseEffectSelectableRange
    };
  }
},

此时，有四个方法：takeEffectDisabledDate，takeEffectSelectableRange，loseEffectDisabledDate，loseEffectSelectableRange
详情看官网 picker-options 的可选参数 disabledDate，和 Time Picker Options 的 selectableRange。

methods 四个方法

methods: {
  // 日期格式化
  dateFormat(time, format = 'YYYY-MM-DD HH:mm:ss') {
    return moment(new Date(time)).format(format);
  },

  takeEffectDisabledDate(time) {
    const currentTime = new Date();
    // 如果选择的时间早于当前时间，禁用它  , - 8.64e7 可以选择今天的
    return time.getTime() < currentTime.getTime() - 8.64e7;
  },

  
  loseEffectDisabledDate(time) {
    let takeEffectTime;
    takeEffectTime = this.addNewForm.takeEffectTime;
    const takeEffectDate = new Date(takeEffectTime);
    takeEffectDate.setHours(0, 0, 0, 0);
    // 如果选择的日期早于生效日期，禁用它
    return time.getTime() < takeEffectDate.getTime();
  },

  // timeRange 用来对当前的时间进行计算，如果是今天的日期，设置只能是此刻的时分以后可选
  takeEffectTimeRange(time) {
    if (time) {
      const currentTime = new Date().getTime();
      const currentDate = this.dateFormat(currentTime, 'YYYY-MM-DD');
      const currentTimeStr = this.dateFormat(currentTime, 'HH:mm:ss');
      const formDate = this.dateFormat(time, 'YYYY-MM-DD');
      // 当天的时候 调整时分限制
      if (currentDate == formDate) {
        return [`${currentTimeStr} - 23:59:59`];
      } else {
        return ['00:00:00 - 23:59:59'];
      }
    }
  },
  
  // timeRange 用来对当前的时间进行计算，如果是生效日期当天，设置只能是生效的时分以后可选
  loseEffectTimeRange(time) {
    if (time) {
      let takeEffectTime;
      takeEffectTime = this.addNewForm.takeEffectTime;
      let currentTakeEffectTime = new Date(takeEffectTime).getTime();
      let currentTakeEffectDate = this.dateFormat(
        currentTakeEffectTime,
        'YYYY-MM-DD'
      );
      let currentTakeEffectTimeStr = this.dateFormat(
        currentTakeEffectTime,
        'HH:mm:ss'
      );
      let formDate = this.dateFormat(time, 'YYYY-MM-DD');
      // 生效当天的时候 调整时分限制
      if (currentTakeEffectDate == formDate) {
        return [`${currentTakeEffectTimeStr} - 23:59:59`];
      } else {
        return ['00:00:00 - 23:59:59'];
      }
    }
  },
}