如何禁用MUI DatePicker日期标签的onClick事件，仅保留箭头导航？

要禁用DatePicker中日历顶部的年月标签（如"March 2025"）的点击事件，仅保留左右箭头的月份导航功能，可以通过自定义slotProps来实现：

修改后的完整代码 #

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs';

// ...其他业务代码

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePickerStyled
    onlyCalendar
    value={dayjs(testDate)}
    label={"test"}
    format="MMM D, YYYY"
    slotProps={{
      field: {
        readOnly: true,
      },
      switchViewButton: {
        sx: { display: 'none' },
      },
      textField: {
        variant: 'standard',
        InputProps: {
          style: {
            fontSize: '16px',
          },
        },
      },
      // 新增：禁用年月标签的点击事件
      calendarPicker: {
        toolbarProps: {
          sx: {
            // 针对年月标签元素，禁用点击交互
            '& .MuiPickersToolbar-label': {
              pointerEvents: 'none',
              cursor: 'default', // 可选：将光标改为默认样式，提示不可点击
            }
          }
        }
      }
    }}
  />
</LocalizationProvider>

逻辑说明 #

• pointerEvents: 'none' 会让年月标签元素忽略所有点击事件，不会触发切换到年份选择视图的逻辑
• 左右箭头按钮属于独立的MuiIconButton-root元素，不受此样式影响，依然可以正常点击切换月份
• 可选的cursor: 'default' 用于优化用户体验，让光标在标签上显示为默认样式，而非可点击的手型

内容的提问来源于stack exchange，提问作者John Glabb