How to override the behavior of auto month switching when selecting date/value ?

[arjaym-dev]

Order ID or Support key 💳 (optional)

70493

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

I have this scenario when selecting date it automatically move the calendar backwards,

1. July month is on left and August is on right now if i select only in the month of july and aug 1 it move backwards the calendar only showing the july month selected. The aug date selected not visible.

2. Also If i have a selected shortcuts such as today, and On the calendar today is august then i tried selected past 3 months now when i select the today shortcuts it jumps on the date today. But when i tried to select any date in july then selecting today in shortcuts it not jumps on the august. Why this behavior is happpening ?

3. Is there a way to control the month switching behavior using one of your method props ?

Here's the example sandbox where you can see the behavior. https://codesandbox.io/s/date-range-picker-question-1-slvvy9?file=/Demo.js

Your environment 🌎

`npx @mui/envinfo`

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

[alexfauquette]

It's somewhat linked to #9906

There is the same need of controlling month switching

July month is on left and August is on right now if i select only in the month of july and aug 1 it move backwards the calendar only showing the july month selected. The aug date selected not visible.

For this one, you can remove the currentMonthCalendarPosition: 2 which lock the view

If you want to see the two month at first, you can use defaultCalendarMonth: new dayjs().subtract(1, "month")

[arjaym-dev]

Hmmm, seems like that the defaultCalendarMonth would only work if the value is [null,null]. And this approach seems like not gonna work if the date has controllable value. You can refer on to this sandbox which shows that the said behavior. https://codesandbox.io/s/date-range-picker-question-1-slvvy9?file=/Demo.js can you check.

[alexfauquette]

seems like the defaultCalendarMonth would only work if the value is [null,null]

Effectively, it does not work if you set an initial date range. But works if you control the value with initially [null, null]

If you need to set the initial date value, the easiest might be to do as in your first example and to disableAutoMonthSwitching

As it is, controlling the month position would be too buggy

[arjaym-dev]

Hmmm, so for now .

• We cant control the value with a predefined initial date range for us to work the defaultCalendarMonth.
• As setting up initial date value i need to first disableAutoMonthSwitching

But disabling the monthSwitching i'll lose that behavior though,

With this 2, there's no way to control or override the behavior of monthSwitching to get the behavior that i've posted on the first issue;

1. July month is on left and August is on right now if i select only in the month of july and aug 1 it move backwards the calendar only showing the july month selected. The aug date selected not visible.

[arjaym-dev]

Hello good day,

Found out this odd behavior again, am sure this is also related to the issue that i've reported already,

Here's the codesandbox link for you to check it out https://codesandbox.io/s/relaxed-tu-zdf75n?file=/src/App.js

My currentMonthCalendarPosition value was default to 2 so that it shows the current month and prev month not the current month and next month.

Then when i select the prev month last day and current month first day the automonthSwitching behavior goes back into prev month viewing but what i wanted to attain behavior was already on the codesandbox link but it become buggy that shows the next month.

[shalev73]

did you find a solution to that bug? I am dealing with the same issue