DateTimePicker禁用时间（精确时分秒）

需求：如上图所示，实现只有当前1小时后的时间可选，也就是选择当天的话需要限制时间选择器，如果选择的是今天之后的日期则不需要限制时间选择器。

一、ElementPlus的实现方法

实现思路

• 限制日期：使用DateTimePicker 日期时间选择器 的disabled-date禁用日期
• 限制时分秒：由于element plus的DateTime Picker组件只提供了disabled-date属性
  这里时分秒的判断用到TimePicker 时间选择器的属性disabled-hours、disabled-minutes、disabled-seconds

实现代码

<el-date-picker
  v-model="formData.pickupTime"
  type="datetime"
  class="g-field-box-input"
  :teleported="false"
  :disabled-date="(time: Date) => disabledDate(time)"
  :disabled-hours="() => disabledHours(formData.pickupTime)"
  :disabled-minutes="() => disabledMinutes(formData.pickupTime)"
  :disabled-seconds="() => disabledSeconds(formData.pickupTime)"
  placeholder="请选择"
/>

// 限制日期
function disabledTime(time: Date, Range = -24) {
  return time.getTime() < Date.now() + Range * 3600 * 1000
}
// 限制小时
function disabledHours(time: string, Range = 1) {
  const a: number[] = []
  if (new Date(time).getTime() > Date.now() + 3600 * 1000)
    return a
  for (let i = 0; i < 24; i++) {
    if (new Date().getHours() + Range <= i)
      continue
    a.push(i)
  }
  return a
}
// 限制分钟
export function disabledMinutes(time: string) {
  const a: number[] = []
  if (new Date(time).getTime() > Date.now() + 3600 * 1000)
    return a
  for (let i = 0; i < 60; i++) {
    if (new Date().getMinutes() <= i)
      continue
    a.push(i)
  }
  return a
}
// 限制小时
export function disabledSeconds(time: string) {
  const a: number[] = []
  if (new Date(time).getTime() > Date.now() + 3600 * 1000)
    return a
  for (let i = 0; i < 60; i++) {
    if (new Date().getSeconds() <= i)
      continue
    a.push(i)
  }
  return a
}

二、ElementUI的实现方法

实现思路

• 限制日期：使用DateTimePicker日期时间选择器的pickerOptions中的disabledDate禁用日期
• 限制时分秒：使用DateTimePicker日期时间选择器的pickerOptions中的selectableRange限制时分秒

实现方法

<el-date-picker
  v-model="form.time"
  format="yyyy-MM-dd HH:mm"
  value-format="yyyy-MM-dd HH:mm"
  type="datetime"
  placement="bottom-start"
  size="small"
  placeholder="请选择时间"
  :picker-options="pickerOptions"
  popper-class="g-unload-picker"
 />

export default {
  data() {
    pickerOptions: {
      disabledDate: (time) => {
        time.getTime() < Date.now() - 8.64e7
      },
      selectableRange: '00:00:00 - 23:59:59',
    }
  },
  watch: {
    'form.time': {
       handler(newValue, oldValue) {
         if (newValue) {
           let date = new Date() // 当前时间
           let min = date.getMinutes()
           date.setMinutes(min + 60) // 设置最小时间，当前时间1小时后
           let nowDate = dayjs(date).format('HH:mm:ss') // 当前1小时后的时间
           let st = ''
           if (dayjs(date).format('YYYY-MM-DD') === dayjs(newValue).format('YYYY-MM-DD')) {
             let hh1 = dayjs(newValue).format('HH:mm:ss') // 选择时间的时分秒
             // 判断当前选中的时间是不是小于十分钟后的时间，小于则赋值十分钟后的时间
             if (hh1 < nowDate) {
               this.form.time = date
             }
             st = nowDate
           } else {
             st = '00:00:00'
           }
           this.pickerOptions.selectableRange = st + ' - 23:59:59'
         }
       },
       deep: true,
       immediate: true,
    }
  }
}