如何基於 json 數組禁用 MUI 中的某些日期和日期反應 datepicker？

Question

我有 Laravel 應用程序，它返回一個 json 響應日期和星期幾，應該在日期選擇器中禁用

例如，當我使用console.log()時，這是我的 datesOff 常量['2022-05-08', '2022-05-11', '2022-05-19']

當我console.log()它時，這是 daysOff 常量[3, 6]

那么如何禁用返回的日期和日期（在這種情況下為星期三和星期日）

    useEffect(() => {
      axios.get(bookingUrl).then((response) => {
        setDaysOff(response.data.daysOff);
        setDatesOff(response.data.datesOff);
        setBooked(response.data.booked);
      })
    }, []);

<LocalizationProvider locale={hr} dateAdapter={AdapterDateFns}>
            <DatePicker
            label="Date"
            disablePast={true}
            minDate={minDate}
            maxDate={maxDate}
            value={date}
            shouldDisableDate={//What do i to here
            }
            onChange={(newDate) => {
            setDate(newDate);
            }}
            renderInput={(params) => <TextField {...params} />}

Answer 1

DatePicker具有renderDay 屬性，我們可以使用它來自定義日歷的日期單元格。 它需要 3 個 arguments，第一個是日期 object，我們可以使用它與應該禁用的日期數組進行比較：

  const dates = ["2022-05-08", "2022-05-11", "2022-05-19"];

  const customDayRenderer = (
    date: Date,
    selectedDates: Array<Date | null>,
    pickersDayProps: PickersDayProps<Date>
  ) => {
    const stringifiedDate = date.toISOString().slice(0, 10);
    if (dates.includes(stringifiedDate)) {
      return <PickersDay {...pickersDayProps} disabled />;
    }
    return <PickersDay {...pickersDayProps} />;
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="Basic example"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        renderInput={(params) => <TextField {...params} />}
        renderDay={customDayRenderer}
      />
    </LocalizationProvider>
  );

演示

Answer 2

我的回答是基於 Dmitriif 的回答，但它已被更改，因為它在選擇日期的過程中導致了許多渲染。

const customDayRenderer = (
    date: Date,
    selectedDates: Array<Date | null>,
    pickersDayProps: PickersDayProps<Date>
) => {
    amountOfExercises.forEach(day => {
        selectedDates.push(new Date(day.exerciseDate))
    });

    return <PickersDay {...pickersDayProps}  sx={{
        [`&&.${pickersDayClasses.selected}`]: {
          backgroundColor: "#EBEBE4",
          cursor: 'not-allowed'
        }
      }} />;
};

---

<DatePicker
   disablePast={true}
   label="Exercise Date"
   **renderDay={customDayRenderer}**
   value={dateValue}
   onChange={(newDateValue) => {
   setNewDateValue(newDateValue);
   }}
   renderInput={(params) => <TextField {...params} />}
   />

“amountOfExercises”是一個 json 數組，在 forEach 中我正在提取我想要禁用的日期並將其推送到 selectedDates 數組。 完成此操作后，您會注意到要禁用的日期的背景顏色已更改，這意味着 DatePicker“知道”應該選擇哪些日期。 為了讓用戶感覺 selectedDates 不可用於選擇（禁用），我添加了 sx 屬性，該屬性提供淺灰色背景色和不允許的 cursor。

我的 coed 中 customDayRender 中的日期變量永遠不會被讀取，但是當我嘗試刪除它時，我遇到了一個錯誤，即 renderDay 方法找不到要渲染的日期