el ui el-date-picker时间禁用问题

  问题是这样的，使用el-date-picker时间选择器，type=datetime，即又能选日期又能选时间。需要做的限制是，开始时间只能选择当前时间之后的时间，其余禁用，禁用级别到小时，目前实现效果如下图：

代码如下：

<el-form-item label="出勤开始时间：" prop="attendanceBeginTime">
    <el-date-picker
        type="datetime"
        format="yyyy-MM-dd HH:mm" //格式化时间
        v-model="formData.attendanceBeginTime"
        :picker-options="pickerOptions1"
        placeholder="选择日期时间"
        @change="getDateTime1"></el-date-picker>
</el-form-item>
<el-form-item label="出勤结束时间：" prop="endTime">
    <el-date-picker
        type="datetime"
        format="yyyy-MM-dd HH:mm"
        v-model="formData.attendanceEndTime"
        :picker-options="pickerOptions2"
        placeholder="选择日期时间"
        @change="getDateTime2"></el-date-picker>
</el-form-item>

pickerOptions1: {
    disabledDate (time) { // 时间的禁用
        if (me.formData.attendanceEndTime) {
            return time.getTime() > me.formData.attendanceEndTime || time.getTime() < Date.now() - 8.64e7 // 如果选择了结束时间，可选择时间段为当前时间到结束时间
         } else {
            return time.getTime() < Date.now() - 8.64e7 // 未选择结束时间时，可选择时间段为当前时间之后的所有时间
          }
},
    selectableRange: selectableTime,// 这里采用了一个取巧的做法，所有的可选择时间是可列举的，这里用一个for循环将24小时以字符串形式列举在selectableRange中，
但其时间段仅为00：00：00 -00：00：01，仅多一秒，在时间format="yyyy-MM-dd HH:mm"时是无法选择到分的
      },

pickerOptions2: {
    disabledDate (time) {
        if (me.formData.attendanceBeginTime) return time.getTime() < me.formData.attendanceBeginTime - 24 * 60 * 60 * 1000 // 结束时间大于起始时间
        },
        selectableRange: selectableTime
    },

getDateTime1 (val) {
    this.formData.attendanceBeginTime = new Date(val).getTime()
},
getDateTime2 (val) {
    this.formData.attendanceEndTime = new Date(val).getTime()
},

function getTime() {
  let hour = ''
  let range = []
  for(let i = 0;i < 24; i++) {
    if (i< 10) {
      hour = '0' + i
    } else {
      hour = i
    }
    range.push(`${hour}:00:00 - ${hour}:00:01`)
  }
  return range
}
export const selectableTime = getTime()

代码中未实现的功能是直接禁用到小时级别，即如果用户选择的时间是今天，那么今天已经过去的小时数也不可选，所以此处借助了form表单校验，代码如下：

data(){
    let me = this
    let attendanceBeginTime = (rule, value, callback) => {
      if (!me.formData.attendanceBeginTime) {
        return callback(new Error('请选择出勤开始时间'))
      } else if (me.formData.attendanceBeginTime < Date.now()) {
        return callback(new Error('出勤开始时间必须大于当前时间'))
      } else {
        callback()
      }
    }
    return {
        rules: {
           attendanceBeginTime: [{ validator: attendanceBeginTime, trigger: 'change' }],
        }
    }
}

功能基本完成。