Skip to content
+

Shortcuts

The date picker lets you add custom shortcuts.

Adding shortcuts

By default, pickers use the PickersShortcuts component to display shortcuts. This component accepts a shortcuts prop as an array of PickersShortcutsItem. Those items are made of two required attributes:

  • label: The string displayed on the shortcut chip. This property must be unique.
  • getValue: A function that returns the value associated to the shortcut.

You can use slotProps.shortcuts to customize this prop. For example to add a shortcut to Christmas Day, you can do the following:

<DatePicker
  slotProps={{
    shortcuts: {
      items: [
        {
          label: 'Christmas',
          getValue: () => {
            return dayjs(new Date(2023, 11, 25));
          },
        },
      ],
    },
  }}
/>
Select date

––

  • New Year's Day
  • Birthday of MLK Jr.
  • Independence Day
  • Labor Day
  • Thanksgiving Day
  • Christmas Day
SMTWTFS
Press Enter to start editing

Disabled dates

By default, the shortcuts are disabled if the returned value does not pass validation. Here is an example where minDate is set to the middle of the year.

Select date

––

  • New Year's Day
  • Birthday of MLK Jr.
  • Independence Day
  • Labor Day
  • Veterans Day
  • Thanksgiving Day
  • World AIDS Day
  • Christmas Day
SMTWTFS
Press Enter to start editing

Range shortcuts

Shortcuts on range pickers require getValue property to return an array with two values.

Select date range
  
  • This Week
  • Last Week
  • Last 7 Days
  • Current Month
  • Next Month
  • Reset
SMTWTFS
Press Enter to start editing

Advanced shortcuts

Use validation to get the value

The getValue methods receive a isValid helper function. You can use it to test if a value is valid or not based on the validation props.

In the following demonstration, it is used to get the next available week and weekend.

Select date range
  
  • Next Available Weekend
  • Next Available Week
  • Reset
SMTWTFS
Press Enter to start editing

Know which shortcut has been selected

The onChange callback receives the shortcut as a property of it's second argument. You can use it to know, which shortcut has been chosen:

Select date

––

  • New Year's Day
  • Birthday of MLK Jr.
  • Independence Day
  • Labor Day
  • Thanksgiving Day
  • Christmas Day
SMTWTFS

Selected shortcut on last onChange call: none

Press Enter to start editing

Behavior when selecting a shortcut

You can change the behavior when selecting a shortcut using the changeImportance property:

  • "accept" (default value): fires onChange, fires onAccept and closes the picker.
  • "set": fires onChange but do not fire onAccept and does not close the picker.

Customization

Like other layout's subcomponent, the shortcuts can be customized. Here is an example with horizontal shortcuts.

  • This Week
  • Last Week
  • Last 7 Days
  • Current Month
  • Next Month
  • Reset

September 2024
SMTWTFS
October 2024
SMTWTFS

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.