el-date-picker 限制时间选择

遇到的需求：发送时间只可选择当前时间之后的时间，精确到分钟，封装成组件

<template>
  <el-date-picker
    v-model="time"
    type="datetime"
    :placeholder="$t('page.tip.selectSendtime')"
    :format="format"
    :value-format="valueFormat"
    :default-time="defaultTime"
    :disabled-date="disabledDateFun"
    :disabled-hours="disabledHoursFun"
    :disabled-minutes="disabledMinutesFun"
  />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { ComposerTranslation } from 'vue-i18n'
import { proxyProp } from '@/composition/props'

interface PropsType {
  modelValue: string
  format?: string
  valueFormat?: string
  defaultTime?
}
const props = withDefaults(defineProps<PropsType>(), {
  format: 'YYYY-MM-DD HH:mm',
  valueFormat: 'YYYY-MM-DD HH:mm',
  defaultTime: new Date(),
})
const emit = defineEmits(['update:modelValue'])
const time = proxyProp(props, 'modelValue')
const $t = inject('i18n') as ComposerTranslation

/* 发送时间限制为 只可选当前时间之前的时间, 精确到分钟 */
const isToday = ref<boolean>(true)

// 禁止选择部分日期选项
function disabledDateFun(time) {
  return time.getTime() <= new Date().getTime() - 24 * 60 * 60 * 1000
}
// 禁止选择部分小时选项
function disabledHoursFun() {
  const disabledHours: Array<number> = []
  const currentHour = dayjs().hour()
  for (let i = 0; i < currentHour; i += 1) {
    disabledHours.push(i)
  }
  return isToday.value ? disabledHours : []
}
// 禁止选择部分分钟选项
function disabledMinutesFun(selectedHour) {
  const disabledMinutes: Array<number> = []
  const currentHour = dayjs().hour()
  for (let i = 0; i < dayjs().minute(); i += 1) {
    disabledMinutes.push(i)
  }
  return isToday.value && selectedHour === currentHour ? disabledMinutes : []
}

watch(
  () => props.modelValue,
  (v) => {
    if (v) {
      const selectedDate = v.slice(0, 10)
      const selectedHour = Number(v.slice(-5, -3))
      const selectedMin = Number(v.slice(-2))
      const today = dayjs().format('YYYY-MM-DD')
      isToday.value = selectedDate === today
      const isBeforeCurrentHour = dayjs().hour() > selectedHour
      const isBeforeCurrentMin =
        dayjs().hour() === selectedHour && dayjs().minute() > selectedMin
      // 切换日期时，若日期为今天且时间早于当前时间，则需设置时间为当前时间
      if (isToday.value && (isBeforeCurrentHour || isBeforeCurrentMin)) {
        emit('update:modelValue', dayjs().format('YYYY-MM-DD HH:mm'))
      }
    }
  },
)
</script>