el-date-picker的selectableRange的限制时间精确到时分

#需求是只能选择当前时间的之后时间

先上效果图

直接上代码

<el-date-picker 
   v-model="form.pushDate" type="datetime" placeholder="选择推送时间"
   value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" 
   @change="changePushDate" :default-time="defaultTime" >
</el-date-picker>

这里给了个默认时间是因为你选择当天的话 组件自动给的是当天的【00:00:00】

然后给了个change事件是因为选择了后面的天数 然后切换当天 他的时分秒没变

因为时间会变化 采用监听

 computed: {
    pickerOptions() {
      let newVal = new Date(this.form.pushDate)
      let selectableRange = '00:00:00 - 23:59:00' 
      if (newVal && newVal.getFullYear() == new Date().getFullYear() &&
         newVal.getMonth() == new Date().getMonth() && 
         newVal.getDate() == new Date().getDate()
      ){
        //如果为今天，则限制当前时间前的时间+1分钟不能选择。
        selectableRange = new Date().getHours() + ':' + 
        (new Date().getMinutes() + 1) + ':00 - 23:59:00'
      }
      return {
        selectableRange,
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },

 然后结尾事件

判断如果时间当天且时间是比现在的时分秒小的就现在时间 这里采用了mement.js

防止在上一天选择了现在时间之前的时分秒 然后在选回当前时间的bug

 changePushDate(val) {
      let newVal = new Date(val)
      if (
        newVal &&
        newVal.getFullYear() == new Date().getFullYear() &&
        newVal.getMonth() == new Date().getMonth() &&
        newVal.getDate() == new Date().getDate() &&
        newVal.getHours() <= new Date().getHours() &&
        newVal.getMinutes() <= new Date().getMinutes()
      ) {
        this.form.pushDate = moment().format('YYYY-MM-DD HH:mm:ss')
      }
    },

更新事件发现这里如果判断写错了 如果小时小于 但是分钟大于当前分钟就有问题这里可以直接对比时间戳

if (newVal.getTime() < Date.now()) {
   this.form.pushDate = moment().format('YYYY-MM-DD HH:mm:ss')
}