[pickers] Inconsistent design of DatePicker and DateRangePicker

[karolis-666]

What's the problem?

Components with similar use cases are different given them same styles and there several other notes:

• DateRangePicker does not have Calendar icon by default
• When you open DatePicker you can also open DateRangePicker without first calendar popper closing. But opening DateRangePicker will force it to close no matter where you click outside of calendar popper boundaries
• Calendar popper UI looks different provided same styles
• DateRangePicker does not have ability to add option to switch month like DataPicker
• Clicking on MM/DD/YYYY on DatePicker will focus on input without opening calendar. To open it you have to click on calendar icon on right. Clicking anywhere on DateRangePicker will always open calendar popper

Repo: https://stackblitz.com/edit/vitejs-vite-jwcwwn?file=src%2FDates%2Findex.tsx

What are the requirements?

• Components for use cases where we select single date and where we select date range should be identical from UI perspective and behave the same when interacting with it.
• Options to style them should be the same without needing to create separate CSS rules
• DateRangePicker should also have ability to switch month like DatePicker with simple dropdown click

What are our options?

No response

Proposed solution

Maybe DateRangePicker can have extended functionality to also support single date select?

Resources and benchmarks

No response

Search keywords:

Search keywords:

[michelengelen]

Hey @karolis-666
Thanks for raising this issue.

There are several points here that I could clarify a bit, but would like to ask @LukasTy for more details if needed.

I'll go over your points one by one:

DateRangePicker does not have Calendar icon by default

In your example you are using the SingleInputDateRangeField component. This has no icon to open the calendar because the default field also does not have one. This was a decision made to have both variants behave the same across input fields.

When you open DatePicker you can also open DateRangePicker without first calendar popper closing. But opening DateRangePicker will force it to close no matter where you click outside of calendar popper boundaries

There is a open PR about this one, that should unify the behavior already: #13434

Calendar popper UI looks different provided same styles

We know about these.

DateRangePicker does not have ability to add option to switch month like DataPicker

We also know about this.

Clicking on MM/DD/YYYY on DatePicker will focus on input without opening calendar. To open it you have to click on calendar icon on right. Clicking anywhere on DateRangePicker will always open calendar popper

This is the same reasoning as in your first point. We try to keep the behvaior consistent in the respective component family. So because the DateRangePicker does open the calendar on input focus it behaves the same when using the SingleInputDateRangeField, as it does not have an icon to open the calendar.
For the DatePicker the reasoning is that it has a button to manually open it. You can control the open state with the open prop as well, if needed.

[LukasTy]

@michelengelen Thank you for the replies.
@karolis-666 I'll try expanding on them a bit more.

DateRangePicker does not have Calendar icon by default

In your example you are using the SingleInputDateRangeField component. This has no icon to open the calendar because the default field also does not have one. This was a decision made to have both variants behave the same across input fields.

We have an example of adding an icon on the Range Pickers, but it is only a visual change.

The regular Date and Time Pickers follow the dialog pattern with focus trapping in the "dialog".
While Date and Time Range Pickers on the desktop follow the tooltip pattern.
In this case, the "TextField" is always kept in focus and you can edit values with a keyboard at all times as well as use a mouse if necessary.
I think that #5368 exists to cover this problem.
I've moved it to the grooming board to avoid losing that issue in the neverending To explore pile. 🙈
But I'll just add that this isn't a topic only about the button/icon, it directly impacts the behavior. If we are talking about having an icon to open a Range Picker—it should use the dialog pattern instead of the tooltip.

Calendar popper UI looks different provided same styles

We know about these.

Could you clarify the specific problem in this case?
Do you expect the widths applied to .MuiDateCalendar to apply to the MuiDateRangeCalendar as well?
I don't think that it would make the most sense, given that these calendars share MuiDayCalendar and not MuiDateCalendar component.
Would having the width specified on the same MuiDayCalendar component for both DateCalendar and DateRangeCalendar help you in this case? (Such that overriding them on MuiDayCalendar would apply them to both components)
This is something that we could explore for the next major (as it's a BC). 🤔

DateRangePicker does not have ability to add option to switch month like DataPicker

We also know about this.

This is the issue for it: #4546.
We hope to have enough resources to work on it this year.

Clicking on MM/DD/YYYY on DatePicker will focus on input without opening calendar. To open it you have to click on calendar icon on right. Clicking anywhere on DateRangePicker will always open calendar popper

This is the same reasoning as in your first point. We try to keep the behvaior consistent in the respective component family. So because the DateRangePicker does open the calendar on input focus it behaves the same when using the SingleInputDateRangeField, as it does not have an icon to open the calendar. For the DatePicker the reasoning is that it has a button to manually open it. You can control the open state with the open prop as well, if needed.

I've explained this topic in more detail in the first comment. 😉

[karolis-666]

Thank you for the quick and detailed answers. They gave me enough insight to understand why these behaviours occur and that some of them are known.

Could you clarify the specific problem in this case?

Yes, I expected that providing the same styles through the sx prop would make them look identical, not only in width but also in height and calendar contents (for example, the day numbers and weekday symbols in the DateRangePicker are larger by 2px)

Since I am satisfied with answers, I am closing this issue

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@karolis-666: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.