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));
          },
        },
      ],
    },
  }}
/>

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.

Range shortcuts

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

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.

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.

API

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

• <PickersShortcuts />