[pickers] Tooltip above the first selected date (to showcase minimum stay required)

[marcel925]

Summary

Hi team. We are using the @mui/x-date-pickers-pro component DateRangePicker for AirBnb-like functionality - for the user to select which dates they would like to stay at an apartment.

Many apartment owners set a minimum number of dates that they want to allow. We would like to communicate the minimum number of days to the user, as a tooltip on top of the first date selected.

Is this a feature that might get built soon? Alternatively, any advice on how we can achieve this?

Thank you @mui team for the amazing project.

Examples

Motivation

We currently disable the disallowed dates, but that's not a great user experience, as the minimum dates required is sometimes weeks or even months, so it looks like everything is disabled when a user is on a mobile screen and seeing only 1 month at a time.

Search keywords: date range picker daterangepicker tooltip

Search keywords:

[LukasTy]

@marcel925 Thank you for creating this issue.
I've looked into it, sorry it took a bit longer because there was some more exploration of the root cause for the problems. 🙈
The idea would be to provide a custom day slot component, where the day is wrapped in a Tooltip component.
The problem is that the PickersDay component expects the onBlur and onFocus to receive the date as a second argument:

mui-x/packages/x-date-pickers/src/PickersDay/PickersDay.tsx

Line 332 in 68d3069

onBlur={(event) => onBlur(event, day)}

The issue is that the Tooltip component only forwards the event to the event handler:
https://github.com/mui/material-ui/blob/9b620c4918939ed9083883d2ce4c46e6b21b5214/packages/mui-material/src/Tooltip/Tooltip.js#L566

I'll look into proposing a fix on the mui-material side in order to support this behavior.

[LukasTy]

@marcel925 Just letting you know that the demo I listed in my previous comment works without the need for a hacky solution if the @mui/material package version is at least 5.15.13 (released today).
This is the updated demo.

WDYT @mui/explore @flaviendelangle would it make sense to bump the peerDep of @mui/material for this specific version?
I'm not sure it is warranted, because it targets a specific example (albeit one that could even become a documentation example) and there is a way ("hacky") to achieve the wanted behavior with older version... 🤷 🤔

[flaviendelangle]

AFAIK nothing prevents the user to bump its minimal version of @mui/material
With that being said, I'm not against taking #12105 (which should merged before stable by the way :/ ) and use 5.15.13 on it

[LukasTy]

@flaviendelangle I've bumped the @mui/material peerDep.
WDYT, would it make sense to add a documentation example for this case or we can close the issue as is? 🤔

[flaviendelangle]

We could have a new example here

[LukasTy]

We could have a new example here

I've added the issue to the grooming board.
We can add the example after the MUI Core bump is merged. 👌

[flaviendelangle]

By the way, the pickers doc structure starts the be quite confusing if we end up with pure customization example on the DateCalendar page while most of them are on the "Visual customization" pages.
I do not have a clear proposal on how to improve it, but I think it's a problem to keep in mind while adding new examples.

[LukasTy]

We agreed to add the mentioned demo on the https://mui.com/x/react-date-pickers/date-range-calendar/ page and refactor the documentation structure if we find a better approach.