Ant Design Vue DatePicker如何禁用当前月及未来月份？-js教程-PHP中文网

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

聖光之護

发布： 2025-02-24 20:12:10

原创

656人浏览过

ant design vue datepicker如何禁用当前月及未来月份？

Ant Design Vue DatePicker组件：禁用当前月及未来月份

Ant Design Vue的DatePicker组件允许灵活定制日期选择。本文将演示如何禁用当前月份及所有未来月份。

方法：利用disabledDate属性

disabledDate属性接收一个函数，该函数以当前日期为参数，返回一个布尔值，指示该日期是否禁用。要禁用当前月及未来月，需编写如下函数：

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

<code class="javascript">const disabledDate = (current) => {
  const today = new Date();
  const sameMonth = today.getFullYear() === current.getFullYear() && today.getMonth() === current.getMonth();
  return sameMonth || current > today;
};</code>

登录后复制

应用disabledDate函数

无阶未来模型擂台/AI 应用平台

无阶未来模型擂台/AI 应用平台，一站式模型+应用平台

查看详情

将disabledDate函数绑定到DatePicker组件：

<code class="vue"><a-date-picker :disabled-date="disabledDate"></a-date-picker></code>

登录后复制

完整示例

以下是一个完整的可运行示例，包含组件导入和数据定义：

<code class="vue"><template>
  <a-date-picker :disabled-date="disabledDate" />
</template>

<script>
import { DatePicker } from 'ant-design-vue';

export default {
  components: {
    'a-date-picker': DatePicker,
  },
  data() {
    return {
      disabledDate: (current) => {
        const today = new Date();
        const sameMonth = today.getFullYear() === current.getFullYear() && today.getMonth() === current.getMonth();
        return sameMonth || current > today;
      },
    };
  },
};
</script></code>

登录后复制

此代码将确保DatePicker组件只允许选择当前日期之前的日期，有效地禁用了当前月及所有未来月份。

以上就是Ant Design Vue DatePicker如何禁用当前月及未来月份？的详细内容，更多请关注php中文网其它相关文章！