vue3+ts使用ant desigen vue库DatePicker日期选择框只能选择此刻之后

今日在开发中，碰到了这样的需求，开始时间框只能选择此刻和此刻之后的时间，翻阅了许多博客都没有找到很简便的方法实习，官方的文档解释的也不是很清楚，结合了一下案例后实现了这个需求。

首先我们需要定义一个DatePicker组件

<a-range-picker v-model:value="time"
                          :placeholder="['开始时间','结束时间']"
                          class="w-full"
                          :disabled-date="disabledDate"
                          :disabled-time="disabledRangeTime"
                          :show-time="{
                            hideDisabledOptions: true,
                            defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')]
                          }"
                          format="YYYY-MM-DD HH:mm"
          />

根据官方文档disabled-date控制不可选择的天，disabled-time控制不可选择的时分秒。

我们在setup中定义这两个方法:

disabledData返回一个布尔值，确定不可以选择的区间

const disabledDate = (current: Dayjs) => {
      return current && current < dayjs().subtract(1, "days") 
    }

disabledRangeTime可拆分：

”_“此时选择的时间，可以用来做判断，“type”即双选框时判断是开始时间还是结束时间

 const disabledRangeTime = (_: Dayjs, type: 'start' | 'end') => {
      const date = new Date()
      const day = date.getDate()
      const hour = date.getHours()
      const min = date.getMinutes()
      if (type === 'start') {
        return {
          disabledHours: () => {
            if(_ !== null) {
              if(_.date() > day) {
                return []
              } else {
                return range(0, hour)
              }
            }
            return range(0, hour)
          },
          disabledMinutes: () =>{
            
            if(_ !== null) {
              if(_.hour() > hour) {
                return []
              } else {
                return range(0, min)
              }
            }
            return range(0, min)
          } 
        }
      }
    }