自定义插槽和子组件

了解如何覆盖日期和时间选择器的各个部分。

操作栏

组件属性

操作栏在所有选择器组件上都可用。默认情况下，在桌面端它不包含任何操作，在移动端包含取消和确定操作。

您可以通过将 actions 属性传递给 slotProps 中的 actionBar 来覆盖显示的操作，如下所示

<DatePicker
  slotProps={{
    // The actions will be the same between desktop and mobile
    actionBar: {
      actions: ['clear'],
    },
    // The actions will be different between desktop and mobile
    actionBar: ({ wrapperVariant }) => ({
      actions: wrapperVariant === 'desktop' ? [] : ['clear'],
    }),
  }}
/>

在下面的示例中，操作栏仅包含一个按钮，该按钮将选择重置为今天的日期

2022年4月

日一二三四五六

<StaticDatePicker
  defaultValue={dayjs('2022-04-17')}
  slotProps={{
    actionBar: {
      actions: ['today'],
    },
  }}
/>

<StaticDatePicker
  defaultValue={dayjs('2022-04-17')}
  slotProps={{
    actionBar: {
      actions: ['today'],
    },
  }}
/>

按 Enter 开始编辑

可用操作

内置的 ActionBar 组件支持四种不同的操作

操作	行为
`accept`	接受当前值并关闭选择器视图
`cancel`	重置为上次接受的日期并关闭选择器视图
`clear`	重置为空值并关闭选择器视图
`today`	重置为今天的日期（和时间，如果相关）并关闭选择器视图

组件

如果您需要自定义日期选择器超出上述选项，您可以提供自定义组件。这可以与 slotProps 结合使用。

在下面的示例中，操作与上面部分中的操作相同，但它们在菜单中呈现

2022年4月

日一二三四五六

<StaticDatePicker
  defaultValue={dayjs('2022-04-17')}
  slots={{
    actionBar: CustomActionBar,
  }}
  slotProps={{
    actionBar: {
      actions: ['today'],
    },
  }}
/>

<StaticDatePicker
  defaultValue={dayjs('2022-04-17')}
  slots={{
    actionBar: CustomActionBar,
  }}
  slotProps={{
    actionBar: {
      actions: ['today'],
    },
  }}
/>

按 Enter 开始编辑

标签页

标签页在所有日期时间选择器组件上都可用。它允许在日期和时间界面之间切换。

组件属性

您可以通过将属性传递给 slotProps 中的 tabs 来覆盖显示的图标，如下所示

<DateTimePicker
  slotProps={{
    tabs: {
      dateIcon: <LightModeIcon />,
      timeIcon: <AcUnitIcon />,
    },
  }}
/>

默认情况下，标签页在桌面端是 hidden 的，在移动端是 visible 的。可以通过设置 hidden 属性来覆盖此行为

<DateTimePicker
  slotProps={{
    tabs: {
      hidden: false,
    },
  }}
/>

组件

如果您需要自定义日期时间选择器超出上述选项，您可以提供自定义组件。这可以与 slotProps 结合使用。

在下面的示例中，标签页使用不同的图标并具有额外的组件

2022年4月

日一二三四五六

<StaticDateTimePicker
  defaultValue={dayjs('2022-04-17')}
  slots={{ tabs: CustomTabs }}
  slotProps={{
    tabs: {
      hidden: false,
      dateIcon: <LightModeIcon />,
      timeIcon: <AcUnitIcon />,
    },
  }}
/>

<StaticDateTimePicker
  defaultValue={dayjs('2022-04-17')}
  slots={{ tabs: CustomTabs }}
  slotProps={{
    tabs: {
      hidden: false,
      dateIcon: <LightModeIcon />,
      timeIcon: <AcUnitIcon />,
    },
  }}
/>

按 Enter 开始编辑

工具栏在所有日期时间选择器组件上都可用。它显示当前值并允许在不同视图之间切换。

组件属性

您可以使用 toolbarFormat 自定义工具栏如何显示当前值。默认情况下，空值被替换为 __。这可以通过使用 toolbarPlaceholder 属性进行修改。

默认情况下，工具栏在桌面端是 hidden 的，在移动端是 visible 的。可以通过设置 hidden 属性来覆盖此行为

<DatePicker
  slotProps={{
    toolbar: {
      // Customize value display
      toolbarFormat: 'YYYY',
      // Change what is displayed given an empty value
      toolbarPlaceholder: '??',
      // Show the toolbar
      hidden: false,
    },
  }}
/>

组件

每个组件都带有自己的工具栏（DatePickerToolbar、TimePickerToolbar 和 DateTimePickerToolbar），您可以重用和自定义它们。

2022年4月

日一二三四五六

<StaticDatePicker
  defaultValue={dayjs('2022-04-17')}
  slots={{
    toolbar: CustomToolbar,
  }}
  slotProps={{
    toolbar: {
      toolbarFormat: 'YYYY',
      toolbarPlaceholder: '??',
    },
    actionBar: {
      actions: ['clear'],
    },
  }}
/>

<StaticDatePicker
  defaultValue={dayjs('2022-04-17')}
  slots={{
    toolbar: CustomToolbar,
  }}
  slotProps={{
    toolbar: {
      toolbarFormat: 'YYYY',
      toolbarPlaceholder: '??',
    },
    actionBar: {
      actions: ['clear'],
    },
  }}
/>

按 Enter 开始编辑

日历头部

日历头部在任何渲染日历以选择日期或日期范围的组件上都可用。它允许用户浏览月份并在可用时切换到月份和年份视图。

组件属性

您可以将属性传递给日历头部，如下所示

2025年3月

日一二三四五六

<DateCalendar
  slotProps={{ calendarHeader: { sx: { border: '1px red solid' } } }}
/>

<DateCalendar
  slotProps={{ calendarHeader: { sx: { border: '1px red solid' } } }}
/>

按 Enter 开始编辑

组件

您可以传递自定义组件来替换头部，如下所示

2025年3月

日一二三四五六

<DateCalendar slots={{ calendarHeader: CustomCalendarHeader }} />

<DateCalendar slots={{ calendarHeader: CustomCalendarHeader }} />

按 Enter 开始编辑

当与日期范围组件一起使用时，您会收到三个额外的属性，让您处理渲染多个月份的场景

calendars：渲染的日历数量
month：用于渲染的头部月份
monthIndex：用于渲染的头部月份的索引

下面的演示展示了如何两个月两个月地导航月份

2025年3月

日一二三四五六

2025年4月

日一二三四五六

<DateRangeCalendar slots={{ calendarHeader: CustomCalendarHeader }} />

<DateRangeCalendar slots={{ calendarHeader: CustomCalendarHeader }} />

按 Enter 开始编辑

年份按钮

此按钮允许用户在 year 视图中更改所选年份。

组件属性

您可以将属性传递给年份按钮，如下所示

2025年3月

<DateCalendar
  openTo="year"
  slotProps={{
    yearButton: {
      sx: {
        color: '#1565c0',
        borderRadius: '2px',
        borderColor: '#2196f3',
        border: '1px solid',
        backgroundColor: '#90caf9',
      },
    },
  }}
/>

<DateCalendar
  openTo="year"
  slotProps={{
    yearButton: {
      sx: {
        color: '#1565c0',
        borderRadius: '2px',
        borderColor: '#2196f3',
        border: '1px solid',
        backgroundColor: '#90caf9',
      },
    },
  }}
/>

按 Enter 开始编辑

组件

您可以传递自定义组件来替换年份按钮，如下所示

2025年3月

<DateCalendar slots={{ yearButton: CustomYearButton }} openTo="year" />

<DateCalendar slots={{ yearButton: CustomYearButton }} openTo="year" />

按 Enter 开始编辑

月份按钮

此按钮允许用户在 month 视图中更改所选月份。

组件属性

您可以将属性传递给月份按钮，如下所示

2025年3月

<DateCalendar
  slotProps={{
    monthButton: {
      sx: {
        color: '#1565c0',
        borderRadius: '2px',
        borderColor: '#2196f3',
        border: '1px solid',
        backgroundColor: '#90caf9',
      },
    },
  }}
  views={['month', 'day']}
  openTo="month"
/>

<DateCalendar
  slotProps={{
    monthButton: {
      sx: {
        color: '#1565c0',
        borderRadius: '2px',
        borderColor: '#2196f3',
        border: '1px solid',
        backgroundColor: '#90caf9',
      },
    },
  }}
  views={['month', 'day']}
  openTo="month"
/>

按 Enter 开始编辑

组件

您可以传递自定义组件来替换月份按钮，如下所示

2025年3月

<DateCalendar
  slots={{ monthButton: CustomMonthButton }}
  views={['month', 'day']}
  openTo="month"
/>

<DateCalendar
  slots={{ monthButton: CustomMonthButton }}
  views={['month', 'day']}
  openTo="month"
/>

按 Enter 开始编辑

箭头切换器

以下插槽允许您自定义如何渲染箭头切换器的按钮和图标：用于导航到选择器的“上一步”和“下一步”步骤的组件：PreviousIconButton、NextIconButton、LeftArrowIcon、RightArrowIcon。

组件属性

您可以将属性传递给图标和按钮，如下所示

2022年4月

日一二三四五六

组件

您可以传递自定义组件来替换图标，如下所示

2022年4月

日一二三四五六

快捷方式

您可以向每个 Picker 组件添加快捷方式。有关更多信息，请查看专用页面。

API

请参阅下面的文档，以获得此处提及的组件的所有可用属性和类的完整参考。

自定义插槽和子组件

周日，4月17日

可用操作

周日，4月17日

2022