即使 showDaysOutsideCurrentMonth 为 true，当单击当前月份之外的日期时，MUI v7 视图也会更改

Question

我正在将我的

<StaticDatePicker />

从 MUI 版本 5 迁移到 MUI 版本 7。

const renderWeekPickersDay = (pickersDayProps: PickersDayProps<Date>) => (
    <DayPicker
      key={pickersDayProps.key}
      date={pickersDayProps.day}
      selectedDates={selectedDates}
      hoveredDates={hoveredDates}
      onWeekPickerClick={onWeekPickerClick}
      onWeekHovered={onWeekHovered}
      pickersDayProps={pickersDayProps}
      firstDayOfWeekStyles={{ marginLeft: "92px" }}
      onDateChange={onDateChange}
    />
  );


<StaticDatePicker
  displayStaticWrapperAs="desktop"
  disableHighlightToday={false}
  maxDate={TODAY}
  autoFocus
  value={currentMonth}
  onChange={onDateChange}
  onMonthChange={onMonthChange}
  showDaysOutsideCurrentMonth
  minDate={START_DATE}
  slots={{
   leftArrowIcon: LeftArrowIcon,
   rightArrowIcon: RightArrowIcon,
   switchViewButton: () => null,
   day: renderWeekPickersDay,
  }}
 />


  const onDateChange = (date: Date | null) => {
    if (!date) return;
    const isSelected = selectedDates.some((selectedDate) => isSameDay(selectedDate, date));
    if (isSelected) {
      const prevDates = selectedDates.filter((d) => !isSameDay(d, date));
      setFieldValue("selectedDates", prevDates);
    } else {
      setFieldValue("selectedDates", [...selectedDates, date]);
    }
  };

迁移到版本 7 后，当我单击当月以外的日期时，月份会发生变化，而不是选择日期。在之前的版本 5 中，我可以选择当前月份之外的日期。

在

onDateChange

中，偶数具有正确的日期，但由于月视图已更改，因此会刷新选定的日期。

我正在使用@mui/date-pickers：7.23.2和@mui/material：5.16.8

Answer 1

此问题的解决方法是在我的自定义

onDaySelect

中添加

DayPicker

。在 MUI 版本 5 中，不需要这样做（我从 pickerDayProps.onDaySelect 传递该函数）并且一切正常，但更新后我需要传递该函数并开始工作。

之前：

<StyledDayPickersDay
        day={pickersDayProps.day}
        outsideCurrentMonth={pickersDayProps.outsideCurrentMonth}
        onDaySelect={pickersDayProps.onDaySelect}
        showDaysOutsideCurrentMonth={pickersDayProps.showDaysOutsideCurrentMonth}
        disabled={pickersDayProps.disabled}
        disableMargin
        isSelected={isSelected}
        isHovered={isHovered}
        onClick={() => onDateChange(date)}
      />

之后：

<StyledDayPickersDay
        day={pickersDayProps.day}
        outsideCurrentMonth={pickersDayProps.outsideCurrentMonth}
        onDaySelect={onDateChange} <-- I added this line only
        showDaysOutsideCurrentMonth={pickersDayProps.showDaysOutsideCurrentMonth}
        disabled={pickersDayProps.disabled}
        disableMargin
        isSelected={isSelected}
        isHovered={isHovered}
        onClick={() => onDateChange(date)}
        isFirstVisibleCell={false}
        isLastVisibleCell={false}
      />