vue3 禁止选日期 DateTimePicker

https://www.jianshu.com/p/286a86358dca

VUE 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 [];
  }
};

:default-time="defaultTime"

点击选择日期的时候 默认设置时分秒

const defaultTime = new Date();