Open marcel925 opened 4 months ago
@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:
https://github.com/mui/mui-x/blob/68d3069dc3592b72a1be989ed596f1da689ddf40/packages/x-date-pickers/src/PickersDay/PickersDay.tsx#L332
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.
@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... 🤷 🤔
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
@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? 🤔
We could have a new example here
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. 👌
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.
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: