如何禁用ant design日期选择器中的所有星期日和特定日期数组

2024-02-14

以下代码禁用了包括今天在内的所有先前日期,但我想禁用 ant design 日期选择器中的所有星期日和特定日期数组。

< DatePicker size = "large"
  format = "DD/MM/YYYY"
  nChange = {
    this.onDate1Change
  }
  disabledDate = {
    current => {
      return current && current < moment().endOf('day');
    }
  }
/>


首先我们来看看 antd 的 Datepickerexample https://codesandbox.io/s/yjegy在依赖的docs https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date.

  1. 禁用所有周日

我们使用moment.js https://momentjs.com/lib 检查日期并禁用所有星期日(这里是第一个 == 零)。

E.g.:

function disabledDate(current) {
  // Can not select sundays and predfined days
  return moment(current).day() === 0 
}
  1. 禁用特定日期

首先,我们定义一个日期数组,然后检查转换后的日期是否在禁用数组中。

const disabledDates = ["2020-07-21", "2020-07-23"];

function disabledDate(current) {
  // Can not select Sundays and predefined days
  return disabledDates.find(date => date === moment(current).format("YYYY-MM-DD"));
}
  1. 将所有内容放在一起

现在我们可以结合这两种解决方案。可以在以下位置找到一个工作示例这个代码沙盒 https://codesandbox.io/s/infallible-goldberg-1n30p?file=/index.js.

E.g.:

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import moment from "moment";
import { DatePicker } from "antd";

const disabledDates = ["2020-07-21", "2020-07-23"];

function disabledDate(current) {
  // Can not select Sundays and predefined days
  return (
    moment(current).day() === 0 ||
    disabledDates.find(date => date === moment(current).format("YYYY-MM-DD"))
  );
}

ReactDOM.render(
  <>
    <DatePicker
      format="YYYY-MM-DD HH:mm:ss"
      disabledDate={disabledDate}
      showTime={{ defaultValue: moment("00:00:00", "HH:mm:ss") }}
    />
  </>,
  document.getElementById("container")
);

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何禁用ant design日期选择器中的所有星期日和特定日期数组 的相关文章

随机推荐

  • @MustOverride 注释?

    在 NET 中 可以为特定超类中的方法指定 mustoverride 属性 以确保子类重写该特定方法 我想知道是否有人有一个自定义的java注释可以达到相同的效果 本质上 我想要的是推动子类覆盖超类中的方法 该方法本身具有一些必须运行的逻辑
  • 如果违反代码约定规则,如何配置 ReSharper 以使构建失败?

    使用 VS2015 更新 2 ReSharper 2016 1 是否有办法配置 ReSharper 使其在违反代码约定规则时使构建失败 None
  • 有没有办法知道特定程序运行时达到的最大 JVM 调用堆栈深度?

    我今天一直在编写一个递归函数 递归深度取决于输入长度 我想从纯粹兴趣的角度来看 是否有某种方法可以监视 可能在某些 JVM 日志或其他地方 特定程序执行期间的最大调用堆栈深度是多少 经过一番思考 我可以想象一种分析方法来近似计算这个值 但这
  • 用于远程IP(主机)的Java RMI

    我是新手 我无法理解RMI正确 互联网上有大量的教程 但据我所知 它们都是针对本地主机的 服务器和客户端都运行在同一台机器上 我想在任何机器上运行客户端 并且主机将位于一台计算机上 让我们考虑一下IP 11 11 11 11 上1099 但
  • Android:使用 SurfaceView 重新获得焦点

    我目前正在熟悉 Android 尝试 Lunar Lander 示例 我发现 如果您离开应用程序 例如 点击通话按钮 它将破坏底层表面 调用surfaceDestroyed 向后导航 这将触发onWindowVisibilityChange
  • 如何使用 django-rest-framework 测试客户端测试二进制文件上传?

    我有一个 Django 应用程序 其视图接受要上传的文件 使用 Django REST 框架 我对 APIView 进行子类化并实现 post 方法 如下所示 class FileUpload APIView permission clas
  • 如何在 Neo4j 中使用类型层次结构?

    Neo4j 中是否有某种方法可以对类型层次结构进行建模 例如 如果我想构建汽车的类层次结构 我可能有一个 Car 基类型 然后有扩展它的子类 例如 SportCar 等 我希望能够创建 SportCar 的实例 但运行查询来获取所有 Car
  • 在 Cassandra 中存储上次触摸时间的最佳方式

    我将最后一次触摸的时间存储在 Postgres 的 User 表中 但是有许多频繁的更新和足够的争用 我可以看到 3 个相同更新死锁的示例 Cassandra 似乎更适合这个目的 但我应该专门用一个表来实现这个目的吗 我不需要旧的时间戳 只
  • Java 编译器会预先计算文字的总和吗?

    int i 10 20 编译器是否真的会处理这段代码 添加10 20 并且字节码与这行代码相同 int i 30 我在哪里可以读到相关内容 是的 您甚至可以亲自验证 以一个小的 Java 文件为例 public class Main pub
  • 如何从 jenkins Powershell 脚本更新环境变量

    您好尝试从阶段编写的 Powershell 脚本更新 jenkins Env 变量 pipeline agent label master environment def var1 default value def var2 defaul
  • “抄送”c++ istream?

    对于我自己的小解析器框架 我试图定义 类似 以下函数 template
  • AES 实施速度

    我已经编写了 AES 的 C 实现 并尝试使其尽可能快 我刚刚开始编程并接受 IT 培训 到目前为止 我已经实现了约 600 的速度提升 但仍然非常慢 为了将我的 AES 实现与我在 Linux 终端中使用的 openssl speed 命
  • 如何在 Material UI 中布局表单?

    我正在尝试使用 MaterialUI Grid 组件和字段构建以下表单布局 Form Field 1 Field 2 TextArea
  • 从 Angular JS 表单发布数据时出错

    我有一个 angularJS 表单 它将数据发布到 scalatra servlet 提交表单后 我无法在 scalatra servlet 中获取任何表单参数 下面是我的代码 AngularJS scope createUser func
  • 使用 JavaScript 隐藏网格项

    我有一个 2 x 2 CSS 网格 每个网格项都简要描述了一项服务 小型企业网站 每个网格项都有一个按钮来了解有关所述服务的更多信息 当用户单击四个按钮之一以了解更多信息时 我希望该网格项展开以占据整个 2x2 网格 我已经在工作 并且其他
  • 尝试从联合中提取类型时出现类型错误

    我正在尝试将类型定义添加到一些使用通过网络工作人员传递消息的代码中 调度的消息有一个字符串类型的成员 可以在运行时使用它来区分它们 One type of Message export interface IOpenFileWMsg typ
  • 选择随机种子并保存

    我想选择一个随机种子numpy random并将其保存到变量中 我可以使用设置种子numpy random seed seed None 但是你如何让 numpy 选择一个随机种子并告诉你它是什么 号码好像用过 dev urandom默认情
  • Hibernate setMaxResult 对父集合也限制子集合

    我有一个带有 ManyToMany fetch FetchType EAGER 子集合的父实体 我只需要加载我找到的父实体的第一条记录 因此我使用以下标准加载它 session createCriteria Parent class set
  • 套件构建过程中出现异常如何解决?

    我已按照以下步骤测试我的应用程序 我已经创建了 Android 项目 我已经为我的示例应用程序和测试应用程序创建了调试签名 需要测试 将sampleapp debug apk放在bin文件夹中 我的工作区在那里 在模拟器中安装了 testa
  • 如何禁用ant design日期选择器中的所有星期日和特定日期数组

    以下代码禁用了包括今天在内的所有先前日期 但我想禁用 ant design 日期选择器中的所有星期日和特定日期数组 lt DatePicker size large format DD MM YYYY nChange this onDate