[DateRangePicker] Implement range shortcuts

[oliviertassinari]

Referring to https://github.com/mui-org/material-ui-pickers/issues/1293#issuecomment-538374383, I think that it would very valuable to implement a range shortcut feature. I was proposing this API:

  /**
   * Whether shortcuts to quickly select a range of dates are displayed or not.
   * If true, preset shortcuts will be displayed.
   * If false, no shortcuts will be displayed.
   * If an array is provided, the custom shortcuts will be displayed.
   */
  rangeShortcuts: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),

but I have no doubt other, potentially better, alternative APIs are possible.

Requests

• https://www.reddit.com/r/reactjs/comments/vi6ael/date_and_time_pickers_for_all/idbttpy

Benchmarks

For the benchmark, we can consider:

• https://www.daterangepicker.com/#examples

• https://blueprintjs.com/docs/#datetime2/date-range-input2

• https://ads.google.com/aw/overview

• https://react-dates.github.io/react-dates/?path=/story/presetdaterangepicker--default

• https://ant.design/components/date-picker/#components-date-picker-demo-presetted-ranges

• https://analytics.google.com/

• The preset as an option on its own: https://search.google.com/search-console/performance/search-analytics?resource_id=sc-domain%3Amui.com

• WooCommerce Analytics

• Stripe

[flaviendelangle]

I fully agree with the idea of shortcuts

I am just not sure about the boolean version

Here a three apis I can think of to define the default and custom shortcuts The prop naming is of course subject to changes.

// Option A: `true` for default and object for custom
// Very concise but very magic
import { DateRangePicker } from '@mui/x-date-pickers-pro'

<DateRangePicker {...other} rangeShortcuts /> // default
<DateRangePicker {...other} rangeShortcuts={[{ /** **/ }]} /> // custom

// Option B: always use objects
import { DateRangePicker, DEFAULT_RANGE_SHORTCUTS } from '@mui/x-date-pickers-pro'

<DateRangePicker {...other} rangeShortcuts={DEFAULT_RANGE_SHORTCUTS} /> // default
<DateRangePicker {...other} rangeShortcuts={[{ /** **/ }]} /> // custom

// Option C: decouple the feature activation and the feature config 
// Similar to what we do for the `filterable` and `filterOperators` on the grid
import { DateRangePicker } from '@mui/x-date-pickers-pro'

<DateRangePicker {...other} enableShortcuts /> // default
<DateRangePicker {...other} enableShortcuts rangeShortcuts=[{ /** **/ }]} /> // custom

I guess the 1st one is great if we think most users will stick with the default one and custom shortcuts is an edge case. But if we think a large portion of our user will remove some shortcut / add others / change the behavior of others, then I prefer to be explicit and avoid props with two signatures.

[RayaneSlimani]

Hi, actually it is possible to do it with the existing components with lot of work but it would be very interesting to add it by default 💯

[yaminagile]

@RayaneSlimani can you share snippets or reference code how you achieve this shortcuts in range picker?

[RayaneSlimani]

@yaminagile just some logic and https://date-fns.org/ 😄 The shorcuts buttons are functions that return the date according to the selected shorcut.

[Wyctus]

What is the current state of this?

[flaviendelangle]

We did not start working on it

[tarmooo]

Hi, actually it is possible to do it with the existing components with lot of work but it would be very interesting to add it by default 💯

Did the same thing so i don't see a point in that. perhaps just a demo in documentation for it to get started faster?

[Magwaer]

Here a demo of a good example https://codesandbox.io/s/textfieldhiddenlabel-material-demo-forked-bpm46e?file=/RangePicker.tsx

[Joseph-Mutua]

There seems to be an error in the demo. When I click the Apply I just get the error: onChange is not a function. Do you know any solution to this please?

[LukasTy]

This feature is now somewhat more easier to implement using the newly introduced PaperContent slot. The examples include working demos with range shortcuts, with a caveat that onChange is not triggered, because we are changing the range values externally.

[gerdadesign]

What about using chips for shortcuts? Perhaps this might be easier to stack vertically in mobile as well.

[alexfauquette]

As a replacement of the ActionBar (the clear button) it would be nice

Just made a codesandbox to explore the different options developers can already set https://codesandbox.io/s/late-dew-zixos5?file=/demo.tsx

[gerdadesign]

As discussed, below are a few variations with the action bar. When it comes to multiple chips, it seems that Material Design 2 and Material Design 3 both favor a horizontal scroll with a fade.

A few chips inline with action bar

Many chips inline with action bar, with horizontal scroll

interactive prototype

Many chips vertically stacked, container inline with action bar

Many chips and action bar vertically stacked (also showing outline style)

[oliviertassinari]

I have updated the benchmark of the issue (first comment) to polish it. Thoughts on https://github.com/mui/mui-x/issues/4563#issuecomment-1258712294:

1. How does it look like with this preset?

It's what the account we have in https://sell.buysellads.com/ use. I feel that the value we use in the above test are shorter compared to how they might be used in real life by Product Manager/Product Designer. So, I think that it could be great to test longer labels too.

2. How would it look like for Joy UI?
3. I think that we need to have a not-too-hard option for the shortcuts to be on the left side. Why, because we are building a component that developers will customize. I would expect a lot to branch out from what Material Design recommends by default. And based on what's done in the wild, it seems that the left side is a common pattern. In practice, I think that we can consider all the options, maybe starting with a demo in the docs, before considering anything built-in.

[gerdadesign]

Thanks for the feedback! These options are definitely with a slightly different use case in mind than where I started. I added more options to figma that show how the chips can be used with this text and how it can be placed in different positions.

with a screenshot preview:

One note that if it gets to be an overwhelming amount of options, then perhaps they no longer qualify as "shortcuts" and would be better served as an input field with selections (like in the Google search console example).

[oliviertassinari]

like in the Google search console example

@gerdadesign This touch on something interesting! I think that we need to consider the notion of what happens when an end-user selects a preset. Does she/he select a start and end date or select the preset itself? (e.g., if you come 15 days later, what do you see?)

In practice, I think that we should optimize here for what's simpler for internal tools/the simple use cases. Based on the above benchmark, I would expect advanced external user-facing applications to implement the range feature themselves.

[gerdadesign]

Here is my proposal for a default + the available customizations.

• I'm suggesting bottom inline as the default for saving space + encouraging keeping a small number of shortcuts. Open to changing my mind here if we think most people would use it differently! Just operating on assumptions right now.
• Shortcuts moveable to bottom (full-width), top, left, and right
• The final slide is a way to show that the chips themselves are also customizable, and based on the existing Material UI docs it seems they should use the clickable chip action.

Default (inline)	bottom (full-width)	top	left	right

And here is a basic prototype of the suggested interaction. All shortcuts would be relative to today's date.

• "Last week"
• "This month"
• What if I want to change the end date after clicking a shortcut?
  • press end date, hovering extends range, click to new date
• Current range picker automatically closes when the end date is accepted; with presets, it might be better to add a submit since you need to verify if the shortcut is correct.

[abury]

What's the ETA on this one? I love MUI, but it's a bit disappointing that something like this isn't provided in a paid solution when it's available for free in other libraries.

[alexfauquette]

@abury This feature is currently blocked by #6900. From the different design approaches, we concluded that there is not a single obvious place for shortcuts. So we decided to implement first a solution to simplify the modification of the layout, and then add the shortcut block in the new layout. It should start in few weeks

[oliviertassinari]

@gerdadesign Great, thanks for the update. I think that it can make sense for Material Design.

If we move forward with this default look. I think that it will be important to have a customization demo the looks like how Google solves the problem on Google Ads and Google Analytics. I think that we could expect many designers or PMs to also ask their engineers to implement this approach.

@danilo-leal did you had initial thoughts on how the date picker should look like with Joy UI?

[danilo-leal]

@oliviertassinari I don't have any specific designs for Joy UI as of now but, at least from an interaction standpoint, I do not expect it to be different from the one @gerdadesign is iterating on for Material UI. Of course, visually it will be something else but it would work similarly?!

[abury]

@alexfauquette Thanks for the update, really looking forward to seeing it in action.

[oliviertassinari]

I think that we need to consider the notion of what happens when an end-user selects a preset. Does she/he select a start and end date or select the preset itself? (e.g., if you come 15 days later, what do you see?)

I have found a component that takes the latter approach: "selecting the preset" rather than the date range: https://vercel.com/design/calendar#presets

[gerdadesign]

Should we address the way we handle the Reset button? Right now it's being treated the same as a chip, but it's functioning a little bit differently. MD3 adds a left-aligned Clear button in the bottom action row. This could be used to clear both the range shortcuts as well as the selection even if they did not use the shortcuts.

[charlesjIV]

I think that we need to consider the notion of what happens when an end-user selects a preset. Does she/he select a start and end date or select the preset itself? (e.g., if you come 15 days later, what do you see?)

I have found a component that takes the latter approach: "selecting the preset" rather than the date range: https://vercel.com/design/calendar#presets

Is there any intention of implementing this feature or is there a way to modify the date range picker locally to support this? The API I am working with works with keywords rather than dates and using Custom Actions isn't my favorite way of implementing this.

[LukasTy]

Is there any intention of implementing this feature or is there a way to modify the date range picker locally to support this?

We are not dismissing such idea, but we are currently spread a bit too thin to tackle such feature additions. 😉

[flaviendelangle]

@LukasTy now that we are passing the shortcut object to onChange, people can do nice things in user-land I did a quick POC here, but we could probably add a doc example based on this approach.

If people wants to entirely disable the view part in favor of a preset list, then I'd suggest using this doc section as the main inspiration.