快捷方式

日期選擇器讓您新增自訂快捷方式。

新增快捷方式

預設情況下，選擇器使用 PickersShortcuts 組件來顯示快捷方式。此組件接受 shortcuts 屬性作為 PickersShortcutsItem 的陣列。這些項目由兩個必要的屬性組成

label：快捷方式晶片上顯示的字串。此屬性必須是唯一的。
getValue：傳回與快捷方式關聯的值的函數。

您可以使用 slotProps.shortcuts 來自訂此屬性。例如，若要新增聖誕節的快捷方式，您可以執行以下操作

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

元旦
MLK Jr. 生日
獨立紀念日
勞動節
感恩節
聖誕節

2025 年 3 月

日一二三四五六

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

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

按下 Enter 開始編輯

停用日期

預設情況下，如果傳回的值未通過驗證，則會停用快捷方式。以下範例中，minDate 設定為年中。

元旦
MLK Jr. 生日
獨立紀念日
勞動節
退伍軍人節
感恩節
世界愛滋病日
聖誕節

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 回呼接收快捷方式作為其第二個引數的屬性。您可以使用它來了解已選擇哪個快捷方式

元旦
MLK Jr. 生日
獨立紀念日
勞動節
感恩節
聖誕節

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 開始編輯