1.效果預覽

動畫.gif

2.使用到的屬性和庫

• disabled-date：一個用來判斷該日期是否被禁用的函數(shù)，接受一個Date對象作為參數(shù)，應該返回一個 Boolean 值
• disabled-hours：判斷該小時是否被禁用的函數(shù)，但和disabled-date略有不同，返回的是一個數(shù)組，數(shù)組里面包含的是被禁選的小時，若無禁選項，返回空數(shù)組即可
• disabled-minutes：同上
• moment時間處理庫

3.代碼實現(xiàn)

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