如何基于 json 数组禁用 MUI 中的某些日期和日期反应 datepicker？答案

【问题标题】：How to disable certain days and dates in MUI react datepicker based on a json array?如何基于 json 数组禁用 MUI 中的某些日期和日期反应 datepicker？
【发布时间】：2022-09-23 01:32:01
【问题描述】：

我有 Laravel 应用程序，它返回日期和星期几的 json 响应，应该在 datepicker 中禁用

例如，当我 console.log() 它 [\'2022-05-08\', \'2022-05-11\', \'2022-05-19\'] 时，这是我的 datesOff 常量

当我 console.log() 它 [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} />}

标签： javascript reactjs material-ui materialize

【解决方案1】：

DatePicker 具有 renderDay 属性，我们可以使用它来自定义日历的日期单元格。它需要 3 个参数，第一个是 Date 对象，我们可以使用它与应该禁用的日期数组进行比较：

  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>
  );

Demo

【讨论】：

【解决方案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 属性，该属性提供浅灰色背景颜色和不允许的光标。

我的 coed 中 customDayRender 中的日期变量永远不会被读取，但是当我尝试删除它时，我遇到了一个错误，即 renderDay 方法找不到要渲染的日期

【讨论】：