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
  componentsProps={{
    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

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

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

February 2023
SMTWTFS
March 2023
SMTWTFS

API

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