[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