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

Posted 2023-05-07

【中文标题】如何在蚂蚁设计日期选择器中禁用所有星期日和特定日期数组

【英文标题】：how to disable all the Sundays and array of specific days in ant design date picker

【发布时间】：2020-11-12 23:59:03

【问题描述】：

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

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

---

【问题讨论】：

因为你是新的贡献者，也请看看why vote。

【参考方案1】：

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

禁用所有星期日

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