如何基于 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 方法找不到要渲染的日期