reactjs - 如何在蚂蚁设计日期选择器中禁用所有星期日和特定日期数组
问题描述
以下代码禁用了包括今天在内的所有先前日期,但我想禁用 ant design 日期选择器中的所有星期日和特定日期数组。
< DatePicker size = "large"
format = "DD/MM/YYYY"
nChange = {
this.onDate1Change
}
disabledDate = {
current => {
return current && current < moment().endOf('day');
}
}
/>
解决方案
首先,我们看一下依赖文档中的 antd 的 Datepicker示例。
- 禁用所有星期日
我们使用moment.js库来检查日期并禁用所有星期日(这里是第一个 == 零)。
例如:
function disabledDate(current) {
// Can not select sundays and predfined days
return moment(current).day() === 0
}
- 禁用特定日期
首先我们定义一个日期数组,然后检查转换后的日期是否在我们禁用的数组中。
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"));
}
- 把所有的放在一起
现在我们可以结合这两种解决方案。可以在此 CodeSandbox中找到一个工作示例。
例如:
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")
);
推荐阅读
- javascript - 如何添加自动完成以使用 angularjs 和远程数据库搜索输入文本?
- python - 如何在 Sagemaker 中将 Tensorboard 与 Pytorch 一起使用
- xml - SOAP UI - 在 CMD 执行中使用 -t 设置代理设置
- angular - 如何在角度应用程序中设置基本 Href?
- python - 将 Python 游戏制作为独立的应用程序
- javascript - 在 JS ajax 调用的 data 参数中写什么
- c++ - 访问函数变体时出现“无效转换”错误
- javascript - 在 for 循环中使用 promise 处理异步数据
- javascript - 如何在没有动态导入的情况下拆分commons js?
- angular - typeScript 控制器