快捷方式

日期选择器允许您添加自定义快捷方式。

添加快捷方式

默认情况下，选择器使用 PickersShortcuts 组件来显示快捷方式。此组件接受一个 shortcuts 属性，其值为 PickersShortcutsItem 数组。这些项由两个必需的属性组成：

label: 显示在快捷方式标签上的字符串。此属性必须是唯一的。
getValue: 返回与快捷方式关联的值的函数。

您可以使用 slotProps.shortcuts 来自定义此属性。例如，要添加一个圣诞节的快捷方式，您可以执行以下操作：

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

元旦
马丁·路德·金纪念日
独立日
劳动节
感恩节
圣诞节

2025 年 3 月

日一二三四五六

<StaticDatePicker
  slotProps={{
    shortcuts: {
      items: shortcutsItems,
    },
  }}
/>

<StaticDatePicker
  slotProps={{
    shortcuts: {
      items: shortcutsItems,
    },
  }}
/>

按 Enter 键开始编辑

禁用日期

默认情况下，如果返回的值未通过验证，则快捷方式将被禁用。这是一个 minDate 设置为年中的示例。

元旦
马丁·路德·金纪念日
独立日
劳动节
退伍军人节
感恩节
世界艾滋病日
圣诞节

2025 年 7 月

日一二三四五六

<StaticDatePicker
  slotProps={{
    shortcuts: {
      items: shortcutsItems,
    },
  }}
  minDate={middleDate}
/>

<StaticDatePicker
  slotProps={{
    shortcuts: {
      items: shortcutsItems,
    },
  }}
  minDate={middleDate}
/>

按 Enter 键开始编辑

范围快捷方式

范围选择器上的快捷方式要求 getValue 属性返回一个包含两个值的数组。

本周
上周
过去 7 天
本月
下个月
重置

2025 年 3 月

日一二三四五六

<StaticDateRangePicker
  slotProps={{
    shortcuts: {
      items: shortcutsItems,
    },
  }}
/>

<StaticDateRangePicker
  slotProps={{
    shortcuts: {
      items: shortcutsItems,
    },
  }}
/>

按 Enter 键开始编辑

高级快捷方式

使用验证来获取值

getValue 方法接收一个 isValid 辅助函数。您可以使用它来测试值是否基于验证属性有效。

在以下演示中，它用于获取下一个可用的周末和周。

下一个可用周末
下一个可用周
重置

2025 年 3 月

日一二三四五六

<StaticDateRangePicker
  shouldDisableDate={shouldDisableDate}
  slotProps={{
    shortcuts: {
      items: shortcutsItems,
    },
  }}
/>

<StaticDateRangePicker
  shouldDisableDate={shouldDisableDate}
  slotProps={{
    shortcuts: {
      items: shortcutsItems,
    },
  }}
/>

按 Enter 键开始编辑

了解已选择哪个快捷方式

onChange 回调接收快捷方式作为其第二个参数的属性。您可以使用它来了解已选择了哪个快捷方式。

元旦
马丁·路德·金纪念日
独立日
劳动节
感恩节
圣诞节

2025 年 3 月

日一二三四五六

上次 onChange 调用时选择的快捷方式无

<StaticDatePicker
  value={value}
  onChange={handleChange}
  slotProps={{
    shortcuts: {
      items: shortcutsItems,
    },
  }}
/>
<Typography>
  Selected shortcut on last onChange call:{' '}
  {lastShortcutSelected === undefined ? 'none' : lastShortcutSelected.label}
</Typography>

<StaticDatePicker
  value={value}
  onChange={handleChange}
  slotProps={{
    shortcuts: {
      items: shortcutsItems,
    },
  }}
/>
<Typography>
  Selected shortcut on last onChange call:{' '}
  {lastShortcutSelected === undefined ? 'none' : lastShortcutSelected.label}
</Typography>

按 Enter 键开始编辑