Ant Design Vue DatePicker：如何禁用当前月及未来月份？

本文介绍如何在 Ant Design Vue 的 DatePicker 组件中禁用当前月和未来所有月份。

首先，你需要导入 DatePicker 组件：

import { DatePicker } from 'ant-design-vue';

然后，定义 disabledDate 属性。这是一个函数，接收一个日期对象作为参数，返回 true 表示禁用该日期，false 表示启用。 以下代码实现了禁用当前月及未来月份的功能：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

立即学习“前端免费学习笔记（深入）”；

const disabledDate = (currentDate) => {
  const today = new Date();
  return currentDate > today;
};

最后，将 disabledDate 属性应用到 DatePicker 组件：

<a-date-picker :disabledDate="disabledDate" />

这样设置后，DatePicker 组件将只允许选择过去月份的日期，当前月及未来月份将被禁用。