禁用一周中的日子，用react-datepicker

Question

我只想禁用我选择的一周中的日子，或者以其他方式启用我

在这里需要的日子是说明性图像

我在文档中找到了此代码，但它不适用于我

    () => {
  const [startDate, setStartDate] = useState(null);
  const isWeekday = (date) => {
    const day = getDay(date);
    return day !== 0 && day !== 6;
  };
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      filterDate={isWeekday}
      placeholderText="Select a weekday"
    />
  );
};

Answer 1

您可以将一周中的一天更改为此示例来自行的文档返回日！== 0＆amp;＆amp; Day！== 6;通过更改最后一个数字。

例如，将Day！== 6更改为day！== 7将仅排除周日，等等

。 >＆amp;＆amp; Day！== [Day Number] 回到回调。例如day！== 0＆amp;＆amp; Day！== 2＆amp;＆amp; Day！== 5;将排除周日，星期二＆amp;星期五。

Answer 2

我有很简单的解决方案：

        import { addDays, getDay, subDays } from "date-fns";
        import React from "react";
        import DatePicker from "react-datepicker";


        type DaysOfTheWeek = "Sunday" | "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday";

        interface Props {
          value: Date;
          error?: boolean;
          isDisabled?: boolean;
          selected?: string;
          onSelect: (value: Date) => void;
          onChange: (value: Date) => void;
          startDate?: Date;
          endDate?: Date;
          className?: string;
          isClearable?: boolean;
          exclude?: DaysOfTheWeek[];
        }

        const DAYS_OF_THE_WEEK: DaysOfTheWeek[] = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

        const DateSelect = (props: Props) => {
          const { onChange, value, onSelect, isDisabled, startDate, endDate, className, isClearable = true, exclude } = props;

          const handleExcludedDates = React.useCallback(
            (date: Date) => {
              if (!exclude?.length) return true;
              const day = getDay(date);
              return !exclude?.includes(DAYS_OF_THE_WEEK[day]);
            },
            [exclude]
          );
          return (
            <DatePicker
              className={className}
              selected={value}
              onChange={onChange}
              onSelect={onSelect}
              disabled={isDisabled}
              isClearable={isClearable}
              minDate={startDate}
              startDate={addDays(startDate ?? new Date(), 1)}
              endDate={endDate}
              filterDate={handleExcludedDates}
              excludeDates={[new Date(), subDays(new Date(), 1)]}
            />
          );
        };

        export default DateSelect;

现在您可以轻松地通过一周的日子

    <DateSelect exclude={"Monday","Friday"} {...demOtherPropsDem} />