[pickers] Date Range Picker with currentMonthCalendarPosition=2 shows wrong range in mobile

[RicardoAlvesPaycritical]

Steps to reproduce

You can see the demo not working here:
https://codesandbox.io/p/sandbox/competent-violet-jpck37

The issue lies within component. to reproduce:

Add DateRangePicker with currentMonthCalendarPosition = 2 to show past month:

<DateRangePicker currentMonthCalendarPosition={2} slots={{ field: SingleInputDateRangeField }} name="allowedRange" />

Select some range in mobile. The selected range will be in the month before the one you selected. For instance, if you select the from 1 December 2024 to 10 December 2024, the selected range will be 1 November 2024 to 10 November 2024. If you open it again, the visual range selected will be the correct range.

Current behavior

Range 1 November 2024 to 10 November 2024 will be selected.

Expected behavior

Range 1 December 2024 to 10 December 2024 should be selected

Context

No response

Your environment

No response

Search keywords: DateRangePicker

Order ID: 103809

[noraleonte]

Hey @RicardoAlvesPaycritical 👋

I'm not able to reproduce the issue you described. The number of calendars displayed in a range picker has to be greater than or equal to the position of the current month.
i.e. if you render 2 calendars, currentMonthCalendarPosition can't be 3. The Mobile range picker renders one calendar, so when you set currentMonthCalendarPosition=2 the behavior is indeed strange, and the view jumps. (the same happens on desktop if you don't set the number of calendars and position correctly 🫠 )

Recording.2024-12-19.181457.mp4

I think we should improve the behavior for this prop so I'm adding it this issue to the board.
I'm not sure if we even need the prop on mobile?

[RicardoAlvesPaycritical]

Hello @noraleonte,

Gravacao.de.Ecra.2024-12-19.174634.mp4

Please find attached the video with the issue. As you can see, I select the range 1 November 2024 to 15 November 2024. As I selected it (visible at 00:00:08) the selected date range shows me I selected range 1 October 2024 to 15 October 2024. As soon I close the picker, It is visible that the range inside the input (00:00:14) is selected October instead of November. When I open it again (00:00:17) The range isn't visible in October bu in November instead.

The code to reproduce the issue seems to be related to currentMonthCalendarPosition when it's value is 2. It is only reproduceable in mobile view.

[noraleonte]

Hey @RicardoAlvesPaycritical
You are right, I could also reproduce this on desktop when currentMonthPosition={2} and calendars={1} (default for mobile pickers).
However, currentMonthPosition should not be greater than the number of calendars -> so the behavior is expected to be sort of funky 🤔 The behavior of the responsive picker is not great though, so we will look into it 👀

[RicardoAlvesPaycritical]

Hello @noraleonte!

My thing using currentMonthCalendarPosition=2 is backed by the documentation, stating I should use it if, instead of showing the current month plus the next one, I want to show the previous month and the current one. How would you advise to be the correct way to do it?

Thanks!

[noraleonte]

Hey @RicardoAlvesPaycritical
I understand. One side of the problem is that you are not going to be able to set currentMonthCalendarPosition=2 unless you have at least 2 calendars rendered.
the second part of the problem, which is internal and we will look into, is that for the responsive DateRangePicker even if you have two calendars on desktop (which is the default) the mobile version displays only one calendar, which is when the behavior gets funky.
You might be able to use a referenceDate if what you are trying to achieve is to open the calendar to a specific view.

[RicardoAlvesPaycritical]

Hello again @noraleonte,

From what I checked, referneceDate highlights the passed date. It could behave similar to what I stated but I don't think it really is since:

• It Highlights the day. I am pretty sure I could override it via sx property though.
• I would have to use a reference date on current month if the rendered view is mobile, and use a reference date of the previous month if desktop.

To better understand our use case, which I think might be pretty common:
Users have filters to search something that happened. Obviously, thinks can't happen in the future, so to make use of a better UX, when opening the date range we obviously don't want to show the current month and the next month. Instead we woudl like to show the previous month and current month.

Can I, somehow control this (even in a clunky way)?