Блог

 <Controller
   name="toDate"
   control={control}
   defaultValue={null}
   render={({ field }) => (
    <DatePicker 
        format="DD/MM/yyyy"
        value={field.value}
        onChange={(e) => { setToDate(e); field.onChange(e); }}
        minDate={fromDate}
        shouldDisableDate={fromDate}
        />
    )}
    {...register("toDate",{ required: true })}
/>
 

Я использовал shouldDisableProp, чтобы отключить дату, которая выбирается внутри другого указателя даты, значение которого хранится в переменной состояния ‘FromDate’.
Но когда я нажимаю на указатель даты, это приводит к этой ошибке.

minDate работает отлично, используя переменную состояния FromDate.

Метод shouldDisableDate получает параметр date и ожидает логическое значение.

 import * as React from "react";
import TextField from "@mui/material/TextField";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import DatePicker from "@mui/lab/DatePicker";

export default function BasicDatePicker() {
  const [value, setValue] = React.useState<Date | null>(null);
  const [fromDate, setFromDate] = React.useState<Date | null>(null);

  return (
    <>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DatePicker
          label="From Date"
          value={fromDate}
          onChange={(newValue) => {
            setFromDate(newValue);
          }}
          renderInput={(params) => <TextField {...params} />}
        />
      </LocalizationProvider>
      <br />
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DatePicker
          label="To Date"
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          minDate={fromDate}
          shouldDisableDate={(dateParam) => {
            //your_condition here
            //return true to disabled and false to enable
            const fromFormatted = fromDate.toISOString().split("T")[0];
            const currentDate = dateParam.toISOString().split("T")[0];

            return fromFormatted === currentDate ? true : false;
          }}
          renderInput={(params) => <TextField {...params} />}
        />
      </LocalizationProvider>
    </>
  );
}


 

Обновленный код

Так что сделайте что-то подобное, и вы достигнете своей цели. В вашем случае сравните параметр dateParam с вашим параметром FromDate, чтобы вернуть true или false и отключить или нет дату.

Редактировать: Now адаптирован к вашему реальному случаю. Просто проверьте это.