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

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

October 2026

SMTWTFS

import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import type { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';

const getMonthWeekday = (
  monthIndex: number,
  weekdayIndex: number,
  dayRank: number,
) => {
  // Helper to find the nth weekday in a given month.
  // For example, Find the 3rd Monday in January.
  const today = dayjs();
  const firstDayOfMonth = today.month(monthIndex).startOf('month');
  const weekDay = firstDayOfMonth.day(); // 0 (Sunday) to 6 (Saturday)

  const deltaToFirstValidWeekDayInMonth =
    (weekDay > weekdayIndex ? 7 : 0) + weekdayIndex - weekDay;
  return firstDayOfMonth.add(
    (dayRank - 1) * 7 + deltaToFirstValidWeekDayInMonth,
    'day',
  );
};

const shortcutsItems: PickersShortcutsItem<Dayjs | null>[] = [
  {
    label: "New Year's Day",
    getValue: () => {
      // (January 1)
      const today = dayjs();
      return today.month(0).date(1);
    },
  },
  {
    label: 'Birthday of MLK Jr.',
    getValue: () => {
      // (third Monday in January)
      return getMonthWeekday(0, 1, 3);
    },
  },
  {
    label: 'Independence Day',
    getValue: () => {
      // (July 4)
      const today = dayjs();
      return today.month(6).date(4);
    },
  },
  {
    label: 'Labor Day',
    getValue: () => {
      // (first Monday in September)
      return getMonthWeekday(8, 1, 1);
    },
  },
  {
    label: 'Thanksgiving Day',
    getValue: () => {
      // (fourth Thursday in November)
      return getMonthWeekday(10, 4, 4);
    },
  },
  {
    label: 'Christmas Day',
    getValue: () => {
      // (December 25)
      const today = dayjs();
      return today.month(11).date(25);
    },
  },
];

export default function BasicShortcuts() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDatePicker
        slotProps={{
          shortcuts: {
            items: shortcutsItems,
          },
        }}
      />
    </LocalizationProvider>
  );
}

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.

New Year's Day
Birthday of MLK Jr.
Independence Day
Labor Day
Veterans Day
Thanksgiving Day
World AIDS Day
Christmas Day

October 2026

SMTWTFS

import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import type { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';

const getMonthWeekday = (
  monthIndex: number,
  weekdayIndex: number,
  dayRank: number,
) => {
  // Helper to find the nth weekday in a given month.
  // For example, Find the 3rd Monday in January.
  const today = dayjs();
  const firstDayOfMonth = today.month(monthIndex).startOf('month');
  const weekDay = firstDayOfMonth.day(); // 0 (Sunday) to 6 (Saturday)

  const deltaToFirstValidWeekDayInMonth =
    (weekDay > weekdayIndex ? 7 : 0) + weekdayIndex - weekDay;
  return firstDayOfMonth.add(
    (dayRank - 1) * 7 + deltaToFirstValidWeekDayInMonth,
    'day',
  );
};

const shortcutsItems: PickersShortcutsItem<Dayjs | null>[] = [
  {
    label: "New Year's Day",
    getValue: () => {
      // (January 1)
      const today = dayjs();
      return today.month(0).date(1);
    },
  },
  {
    label: 'Birthday of MLK Jr.',
    getValue: () => {
      // (third Monday in January)
      return getMonthWeekday(0, 1, 3);
    },
  },
  {
    label: 'Independence Day',
    getValue: () => {
      // (July 4)
      const today = dayjs();
      return today.month(6).date(4);
    },
  },
  {
    label: 'Labor Day',
    getValue: () => {
      // (first Monday in September)
      return getMonthWeekday(8, 1, 1);
    },
  },
  {
    label: 'Veterans Day',
    getValue: () => {
      // (November 11)
      const today = dayjs();
      return today.month(10).date(11);
    },
  },
  {
    label: 'Thanksgiving Day',
    getValue: () => {
      // (fourth Thursday in November)
      return getMonthWeekday(10, 4, 4);
    },
  },
  {
    label: 'World AIDS Day',
    getValue: () => {
      // (December 1)
      const today = dayjs();
      return today.month(11).date(1);
    },
  },
  {
    label: 'Christmas Day',
    getValue: () => {
      // (December 25)
      const today = dayjs();
      return today.month(11).date(25);
    },
  },
];

export default function DisabledDatesShortcuts() {
  const middleDate = dayjs(new Date().setMonth(6));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDatePicker
        slotProps={{
          shortcuts: {
            items: shortcutsItems,
          },
        }}
        minDate={middleDate}
      />
    </LocalizationProvider>
  );
}

Range shortcuts

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

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

MUI X Missing license key

October 2026

SMTWTFS

import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
import type { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
import type { DateRange } from '@mui/x-date-pickers-pro/models';

const shortcutsItems: PickersShortcutsItem<DateRange<Dayjs>>[] = [
  {
    label: 'This Week',
    getValue: () => {
      const today = dayjs();
      return [today.startOf('week'), today.endOf('week')];
    },
  },
  {
    label: 'Last Week',
    getValue: () => {
      const today = dayjs();
      const prevWeek = today.subtract(7, 'day');
      return [prevWeek.startOf('week'), prevWeek.endOf('week')];
    },
  },
  {
    label: 'Last 7 Days',
    getValue: () => {
      const today = dayjs();
      return [today.subtract(7, 'day'), today];
    },
  },
  {
    label: 'Current Month',
    getValue: () => {
      const today = dayjs();
      return [today.startOf('month'), today.endOf('month')];
    },
  },
  {
    label: 'Next Month',
    getValue: () => {
      const today = dayjs();
      const startOfNextMonth = today.endOf('month').add(1, 'day');
      return [startOfNextMonth, startOfNextMonth.endOf('month')];
    },
  },
  { label: 'Reset', getValue: () => [null, null] },
];

export default function BasicRangeShortcuts() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDateRangePicker
        slotProps={{
          shortcuts: {
            items: shortcutsItems,
          },
        }}
      />
    </LocalizationProvider>
  );
}

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.

Next Available Weekend
Next Available Week
Reset

MUI X Missing license key

October 2026

SMTWTFS

import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
import type { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
import type { DateRange } from '@mui/x-date-pickers-pro/models';

const shortcutsItems: PickersShortcutsItem<DateRange<Dayjs>>[] = [
  {
    label: 'Next Available Weekend',
    getValue: ({ isValid }) => {
      const today = dayjs();
      const nextSaturday =
        today.day() <= 6
          ? today.add(6 - today.day(), 'day')
          : today.add(7 + 6 - today.day(), 'day');

      let maxAttempts = 50;
      let solution: [Dayjs, Dayjs] = [nextSaturday, nextSaturday.add(1, 'day')];
      while (maxAttempts > 0 && !isValid(solution)) {
        solution = [solution[0].add(7, 'day'), solution[1].add(7, 'day')];
        maxAttempts -= 1;
      }

      return solution;
    },
  },
  {
    label: 'Next Available Week',
    getValue: ({ isValid }) => {
      const today = dayjs();
      const nextMonday =
        today.day() <= 1
          ? today.add(1 - today.day(), 'day')
          : today.add(7 + 1 - today.day(), 'day');

      let maxAttempts = 50;
      let solution: [Dayjs, Dayjs] = [nextMonday, nextMonday.add(4, 'day')];
      while (maxAttempts > 0 && !isValid(solution)) {
        solution = [solution[0].add(7, 'day'), solution[1].add(7, 'day')];
        maxAttempts -= 1;
      }

      return solution;
    },
  },
  { label: 'Reset', getValue: () => [null, null] },
];

const shouldDisableDate = (date: Dayjs) => {
  const today = dayjs();

  if (today.isSame(date, 'month')) {
    return true;
  }
  const nextMonth = today.add(1, 'month').startOf('month');

  if (date.isSame(nextMonth, 'month')) {
    if (date.isSame(nextMonth, 'week')) {
      return true;
    }
    return [10, 11, 12, 16, 18, 29, 30].includes(date.date());
  }
  return false;
};

export default function AdvancedRangeShortcuts() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDateRangePicker
        shouldDisableDate={shouldDisableDate}
        slotProps={{
          shortcuts: {
            items: shortcutsItems,
          },
        }}
      />
    </LocalizationProvider>
  );
}

Know which shortcut has been selected

The onChange callback receives the shortcut as a property of its second argument. You can use it to find out which shortcut has been chosen:

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

October 2026

SMTWTFS

Selected shortcut on last onChange call: none

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 does not fire onAccept and does not close the picker.