Vue3 ElementPlus DateTimePicker 日期时间选择器 禁用日期以及时间选择只显示小时

禁用今天之前的日期

const disabledDate = (time: Date) => {
  return time.getTime() < Date.now() - 8.64e7
}

禁用今天和今天之前的日期

const disabledDate = (time: Date) => {
  return time.getTime() < Date.now()
}

时间选择只显示小时

效果：

注意：在 DateTimePicker 组件上一定要加上这个属性 teleported 为 false，否则样式不生效

样式：

:deep(.hour-picker) {
  .el-time-spinner__wrapper {
    width: 100% !important;
  }

  .el-scrollbar:nth-of-type(2) {
    display: none !important;
  }
}

最后组件代码

<el-date-picker
    v-model="timeSlot"
    type="datetime"
    placeholder="查询空闲房间"
    format="YYYY-MM-DD HH:00"
    value-format="YYYY-MM-DD HH:00"
    :disabled-date="disabledDate"
    clearable
    popper-class="hour-picker"
    :teleported="false"
    @change="updateCalendar"
/>