Question

以下代码禁用了所有以前的日期，包括今天，但是我想禁用所有的星期日和蚂蚁设计日期选择器中的特定日期数组。

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

Answer 1

首先，我们来看看依赖的example中antd的Datepicker docs。

禁用所有星期日

我们使用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"));
}

放在一起

现在，我们可以结合两种解决方案。一个有效的示例可以在this 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")
);

如何在蚂蚁设计日期选择器中禁用所有星期日和特定日期的数组

1 个答案: