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

原创

已于 2023-12-05 15:36:27 修改 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端 #前端框架 #anti-design-vue

于 2023-06-13 11:47:26 首次发布

文章展示了如何使用HTML和JavaScript（特别是dayjs库）实现一个考勤时间的搜索功能。代码包括了一个日期范围选择器，该选择器限制用户不能选择未来的日期和时间。当选择当前日期时，时间选择会受到限制，不允许选择未来的时间。在选择过程中，如果先选定了超出当前时间的分钟，分钟选择会被重置，确保时间始终有效。

需求

根据考勤时间查找列表项

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

代码实现

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-