-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[pickers] Tooltip above the first selected date (to showcase minimum stay required) #12248
Comments
@marcel925 Thank you for creating this issue.
The issue is that the Tooltip component only forwards the event to the event handler: I'll look into proposing a fix on the |
@marcel925 Just letting you know that the demo I listed in my previous comment works without the need for a hacky solution if the WDYT @mui/explore @flaviendelangle would it make sense to bump the |
AFAIK nothing prevents the user to bump its minimal version of |
@flaviendelangle I've bumped the |
We could have a new example here |
I've added the issue to the grooming board. |
By the way, the pickers doc structure starts the be quite confusing if we end up with pure customization example on the |
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. |
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:
The text was updated successfully, but these errors were encountered: