[pickers] Month DatePicker showing months as disabled when opened

[lucapasquale]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/date-and-time-pickers-forked-9pltzg?file=/src/App.tsx

Steps:

1. Select a startDate that is in a future year (2025 for example)
2. Open endDate picker
3. It will show the 2025 months, but they will all be disabled
4. Selecting a different year and then going back to 2025 will re-enable the months

Current behavior 😯

When opening a month date picker with a set minDate, it will open the right year, but it will have all months disabled, even though they should be valid

Expected behavior 🤔

It should open the month picker in the minDate year, with all months before minDate disabled

Context 🔦

Since mui-x doesn't have a DateRangePicker for month periods, I tried creating one with two DatePickers where I set views=["month", "year"], and I use the first value as the minDate for the second picker, and the second value for the maxDate for the first picker. But when trying to select the second value it displays disabled months where it shouldn't be

Apparently using ["year", "month"] fixes the issue, but that isn't ideal to our use-case.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 13.3.1
  Binaries:
    Node: 18.13.0 - ~/.asdf/installs/nodejs/18.13.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.6.4 - ~/code/sinai/sinai-phoenix-platform/node_modules/.bin/npm
  Browsers:
    Chrome: 112.0.5615.137 (the one used)
    Edge: Not Found
    Firefox: 112.0.1
    Safari: 16.4
  npmPackages:
    @mui/x-license-pro: ^6.0.4 => 6.0.4

Order ID or Support key 💳 (optional)

No response

[alexfauquette]

Since mui-x doesn't have a DateRangePicker for month periods

There is no picker view for now, but you can use the range fields as follow
https://codesandbox.io/s/nice-wescoff-yukpet?file=/demo.tsx

About the month view bug, it's seems to be because the month view thinks its still in the current year.

in DateCalendar.tsx, you can see that the <PickersCalendarHeader /> get currentMonth={calendarState.currentMonth}. But the <MonthCalendar /> don't have access to this props.

To fix the bug currentMonth should be propagated and used to compute the month values when no value is already selected instead of now which is currently used

[flaviendelangle]

Fixed by #9260
Updated codesandbox

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @lucapasquale?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.