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

本文介绍: vue3+ts 使用 ant de sig en vue库Da t ePic k e r 日期选择框只能选择此刻之后

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

&lt;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"
          /&gt;

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

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

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

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

disabledRangeTime可拆分：

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

 const disabledRangeTime = (_: Dayjs, type: 'start' | 'end') =&gt; {
      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)
          } 
        }
      }
    }