VUE实现禁止选择未来时间的日期选择器

需求

根据考勤时间查找列表项

单位：年、月、日、时、分

代码实现

 html：

 <search-box>
            <div class="page-search">
                <div class="search-item">
                    <span class="search-label">考勤时间：</span>
                    <div>
                        <a-range-picker v-model:value="search.time" show-time format="YYYY-MM-DD HH:mm"
                            valueFormat="YYYY-MM-DD HH:mm"  :disabled-date="disabledDate"
                            :disabled-time="disabledTime" />
                    </div>
                </div>
            </div>
            <template #btn>
                <a-button type="primary" @click="handleSearch">搜索</a-button>
                <a-button class="margin-left-14" @click="handleReset">重置</a-button>
            </template>
        </search-box>

js：

//日期（年月日）
const disabledDate = (current) => {
    return current && current > dayjs().endOf('day');
};

//时间（时分秒）
const disabledTime = (current) => {
    const now = dayjs();
    const currentHour = now.hour();
    const currentMinute = now.minute();

    // 如果当前选择的日期是今天，则禁止选择未来的时间
    if (!current || (current && current.isSame(now, 'day'))) {
        return {
            disabledHours: () => [...Array(24 - currentHour - 1).keys()].map((_, i) => currentHour + 1 + i),
            disabledMinutes: (selectedHour) =>
                selectedHour === currentHour ? [...Array(60 - currentMinute - 1).keys()].map((_, i) => currentMinute + 1 + i) : [],
        }
    }
};

PS. 虽然点开日期选择框，默认选中了当天，但是disabledTime中的current此时为null，故在if判断中要加上!current。

效果

此时是2023-06-13 11:41，似乎分钟没有生效？因为此时我们还没有选择小时，故分钟还未加以限制， 当我们选中当前小时：

 那么先选中59分钟再选择当前时间会导致BUG吗？我们实验一下，发现选中小时后分钟会被限制，如果之前选中的分钟数在未来的话，分钟会被清空，需要重新选择；如果是过去或者正在发生的分钟数则会保持。So，就是这样。