search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.9k stars 1.18k forks source link

modal date range picker #8838

Open githorse opened 1 year ago

githorse commented 1 year ago

Duplicates

Latest version

Summary 💡

Shortcuts are super cool but they don't quite get me to where I want. I want my users to be able to operate in day, week,month, etc. or custom mode. custom mode is just the normal, default behavior of the date range pickers. But in week mode, for instance, hovering over the calendar would select exactly one week at a time (i.e., the user would be unable to select endpoints, just to click once to select a particular week.) Likewise for day, month, quarter, year, etc. (Ideally I would be able to define custom intervals if I needed them.)

Shortcuts would still be useful, but clicking on one would now both presumably select that particular date range and put the user into a particular mode (e.g. Last Week and This Week would both turn on week mode). The user would need to click on custom (and/or maybe right-click or double-click or whatever) in order to remove the restrictions and allow selecting an arbitrary date range.

This sounds like a generalization of the Month Range Picker, but it's not really as that's for picking a span of months, not a single month. Clearly there is some interplay between the two ideas. (Probably in week mode I should optionally be able to select multiple weeks at a time instead of just one?) The month and year modes are perhaps covered by the MonthCalendar and YearCalendar components; these obviously look different than the standard range picker but probably for the best. But those don't cover week, quarter, or custom intervals, and of course toggling between all those different pickers it its own problem.

Also possibly related: https://github.com/mui/mui-x/issues/6597.

Examples 🌈

Notionally, this would look something like the following:

image

Motivation 🔦

My users often want to see a week's worth (or a month's worth) of data, but not always this week or last week. Obviously I can't provide enough shortcuts to make it easy to select arbitrary intervals like "5 weeks ago" or "last July", but a modal picker as described would do that.

Order ID 💳 (optional)

46840

alexfauquette commented 1 year ago

Highlighting days with hover might be complicated, but you can handle the case of clicking on a day to select the entire month or the entire week

Here si a behavior example. It's a bit hacky and require a bit more design https://codesandbox.io/s/clever-ellis-idigui?file=/demo.tsx