【ElementPlus】设置el-date-picker日期时间选择器的禁选日期、小时和分钟

1.效果预览

动画.gif

2.使用到的属性和库

• disabled-date：一个用来判断该日期是否被禁用的函数，接受一个Date对象作为参数，应该返回一个 Boolean 值
• disabled-hours：判断该小时是否被禁用的函数，但和disabled-date略有不同，返回的是一个数组，数组里面包含的是被禁选的小时，若无禁选项，返回空数组即可
• disabled-minutes：同上
• moment时间处理库

3.代码实现

<el-date-picker
  v-model="selectTime"
  type="datetime"
  value-format="YYYY-MM-DD HH:mm"
  format="YYYY-MM-DD HH:mm"
  placeholder="请选择时间"
  :disabled-date="disabledDate"
  :disabled-hours="disabledHour"
  :disabled-minutes="disabledMinute"
/>

/** 选择的日期时间 */
const selectTime = ref();

/** 可选的最后日期，之后的日期、时间、分钟禁选 */
const disabledDateTime = moment("2022-11-23 09:20");

/** 禁选日期 */
const disabledDate = (time: Date) => {
  return time.getTime() > moment(disabledDateTime).toDate().getTime();
};

/** 禁选小时：如果当前选择的日期和被禁选的日期为同一天，则进行小时的禁用 */
const disabledHour = () => {
  if (
    disabledDateTime &&
    moment(selectTime.value).format("YYYY-MM-DD") == moment(disabledDateTime).format("YYYY-MM-DD")
  ) {
    return Array.from({ length: 24 - disabledDateTime.hours() }, (v, i) => i + 1 + disabledDateTime.hours());
  } else {
    return [];
  }
};

/** 禁选分钟：如果当前选择的日期和时间，和被禁选的日期和时间为同一天同一小时，则进行分钟的禁用 */
const disabledMinute = () => {
  if (
    disabledDateTime &&
    moment(selectTime.value).format("YYYY-MM-DD HH") == moment(disabledDateTime).format("YYYY-MM-DD HH")
  ) {
    return Array.from({ length: 60 - disabledDateTime.minutes() }, (v, i) => i + 1 + disabledDateTime.minutes());
  } else {
    return [];
  }
};