MUI 5 MobileDatePicker如何禁用年份切换功能？

针对你使用的@mui/x-date-pickers ^5.0.0-beta.7版本，要禁用MobileDatePicker的年份切换、阻止进入年份选择视图，有两种可行方案：

方案一：通过views props限制允许的视图层级 #

默认情况下，MobileDatePicker允许用户在year、month、day三个视图间切换。你可以通过views props指定仅允许month和day视图，直接屏蔽年份视图的访问入口：

import { useState } from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
import AdapterDateFns from '@mui/x-date-pickers/AdapterDateFns';
import TextField from '@mui/material/TextField';

export default function NoYearSwitchDatePicker() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <MobileDatePicker
        label="选择日期"
        value={selectedDate}
        onChange={(newDate) => setSelectedDate(newDate)}
        renderInput={(params) => <TextField {...params} />}
        // 仅启用月、日视图，禁用年份视图
        views={['month', 'day']}
      />
    </LocalizationProvider>
  );
}

方案二：自定义Toolbar隐藏年份切换功能 #

如果你需要保留年份显示，但禁止用户点击切换到年份视图，可以自定义组件的Toolbar，将可点击的年份替换为静态文本：

import { useState } from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { MobileDatePicker, MobileDatePickerToolbar } from '@mui/x-date-pickers/MobileDatePicker';
import AdapterDateFns from '@mui/x-date-pickers/AdapterDateFns';
import TextField from '@mui/material/TextField';
import { Typography } from '@mui/material';

// 自定义Toolbar，移除年份点击切换功能
const CustomDatePickerToolbar = (props) => {
  const { date } = props;
  return (
    <MobileDatePickerToolbar
      {...props}
      title={
        <Typography variant="h6">
          {date.getFullYear()}年 {date.getMonth() + 1}月
        </Typography>
      }
    />
  );
};

export default function StaticYearDatePicker() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <MobileDatePicker
        label="选择日期"
        value={selectedDate}
        onChange={(newDate) => setSelectedDate(newDate)}
        renderInput={(params) => <TextField {...params} />}
        components={{ Toolbar: CustomDatePickerToolbar }}
      />
    </LocalizationProvider>
  );
}

注意：由于你使用的是beta版本，部分API可能与正式版存在差异，上述代码基于^5.0.0-beta.7版本的特性编写，可直接测试使用。

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