reactjs - 在 React-Day-Picker 中禁用所有未来的日子？

Question

我有一个使用 react-day-picker 的日期范围日历。除了我无法从选择中禁用“所有”未来日子之外，它的效果很好。api 文档显示您可以输入一天或多天，但不能输入所有未来的日子？

      <DayPicker
        disabledDays={new Date()} // how to disable all days after today?
        modifiers={{
          sunday: day => day.getDay() === 0,
          firstOfMonth: day => day.getDate() === 1
        }}
        onDayClick={this.handleDayClick}
        onDayMouseEnter={this.handleDayMouseEnter}
      />

Answer 1

稍微好一点的版本是

const today = new Date();
<DayPicker
  disabledDays={{ after: today }}
  selectedDays={new Date()}
/>

示例：https ://codesandbox.io/s/l942z0w9y9

Answer 2

看起来disabledDaysprop 也可以是一个函数：(day: Date) ⇒ boolean因此您应该能够执行以下操作：

disabledDays={day => day > (new Date())}

Answer 3

下面的代码将有助于禁用，

选定的未来日子

禁用当天之前的所有天

周末（周六和周日）

方式一：

API 响应是一个对象数组。

import DayPicker from "react-day-picker";
import moment from "moment";
import "react-day-picker/lib/style.css";

const selectedDaysToDisable = [];

const arr = [
    { id: 1, date: "Sep 28 2021 10:00:00 AM" },
    { id: 2, date: "Sep 29 2021 08:00:00 AM" },
    { id: 3, date: "Oct 5 2021 08:00:00 AM" }
  ];

arr.map((val) => {
    return selectedDaysToDisable.push(dateFormat(val.date));
});

function dateFormat(date) {
    return new Date(
        moment(date).format("MM") +
        "/" +
        moment(date).format("DD") +
        "/" +
        moment(date).format("YYYY")
    );
  }

<DayPicker
 disabledDays={[
      { before: new Date() },
      { daysOfWeek: [0, 6] },
      ...selectedDaysToDisable
    ]}
/>

方式二：

为了简单的理解。

const selectedDaysToDisable = [new Date(2021, 8, 28), new Date(2021, 8, 23), new Date(2021, 8, 29)];
<DayPicker
    disabledDays={[
        { before: new Date() },
        { daysOfWeek: [0, 6] },
        ...selectedDaysToDisable
    ]}
/>