如何根据JSON阵列禁用MUI中的某些日子和日期datePicker？

Question

我拥有Laravel应用程序，该应用程序返回日期和一周中的日期的响应，

例如，在datepicker中应禁用，例如，当i console.log（） it ['' 2022-05-08'，'2022-05-11'，'2022-05-19']

，这是i console.log（） it 时，这是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

感谢 dmitriif 代码工作正常，除了代码的一个问题是日期请勿禁用数组的日期，例如日期：2020-05-19，它将禁用2020-05-20，以解决您需要更新一行代码：

const stringifiedDate = date.toISOString().slice(0, 10);

to：

const stringifiedDate = dayjs(date).format('YYYY-MM-DD');

install dayjs 并在您的文件中导入。你很好。

再次感谢 dmitriif

Answer 2

datepicker renderday> renderday 可以用来自定义日历的日间单元格。它需要3个参数，第一个是日期对象，我们可以用来将其与应禁用的一系列日期进行比较：

  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

Answer 3

我的答案是基于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} />}
/>

MANESOFECERCISE 是一个JSON数组，在 foreach 内。我正在提取要禁用的日期，然后将其推到 selected Dates 数组。

执行此操作后，您会注意到您想要禁用的日期的背景颜色已更改，这意味着 datePicker “知道”应该选择哪些日期。

为了让用户有一种感觉，即 selected Dates 无法用于（禁用）选择，我添加了 sx 属性，该属性提供了 lightgray 背景颜色和不允许的光标。

我的代码中的 customdayrender 内部的日期变量永远不会读取