antd-vue a-date-picker 组件限制时间选择范围

使用antd-vue的时间控件，并设置选择范围。通常需求都是只控制日期就好，但是也有需求是要求限制具体时间的，从 antd-vue官方文档 上看到，show-time和disabled-time一起使用可以实现限制时间可用范围。使用如下：

<template>
  <div>
    <span>给定时间，限制可选范围：{{ setDate }}</span>
  </div>
  <a-date-picker
    v-model:value="bookDeliveryTime"
    valueFormat="YYYY-MM-DD HH:mm:ss"
    :disabled="pickerDisabled"
    :disabled-date="disabledDate"
    :disabled-time="disabledDateTime"
    show-time
    @change="changeDeliveryTime"
  />
</template>

<script setup>
import { ref } from "@vue/reactivity"
import moment from "moment"

const setDate = ref(moment(new Date()).format("YYYY-MM-DD HH:mm:ss"))
const bookDeliveryTime = ref(null)
const pickerDisabled = ref(false)

// 日期限制
const disabledDate = current => {
  // 包含当天以及之后的7天可选
  return current < moment().startOf('day') || current > moment().add(7, 'days')
}
// 时间限制
const disabledDateTime = datetime => {
  // 当日只能选择当前时间之后的时间点，否则不做限制
  if (datetime && datetime.date() === moment().date()) {
    const hours = moment().hours() // 当前时间的时分秒
    return {
      disabledHours: () => range(0, hours + 1), // 假设当前为7点整，则0-7都不可选
      disabledMinutes: () => [], // 因为7点不可选，所以不可选的分钟和秒钟的数组为空，即0-59这60个数字都可选
      disabledSeconds: () => []
    }
  }
}
// 对应的时间（时、分、秒）的范围
const range = (start, end) => {
  const result = []
  for (let i = start; i < end; i++) {
      result.push(i)
  }
  return result
}
const changeDeliveryTime = (val, date, d) => {
    if (!val) return
    bookDeliveryTime.value = moment(val).format('YYYY-MM-DD HH:mm:ss')
}
</script>