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

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.

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 />