如何在Material-UI Picker月视图中将月份格式化为长名称？

你重写的getMonthText方法不负责月视图选择列表的月份名称渲染，该场景下Picker默认调用的是getMonthShort方法获取短格式月份，所以你的修改没有生效。

方案1：重写工具类方法（全局生效） #

补充导入date-fns的format方法，同时重写getMonthShort即可，你也可以同步重写getMonthText覆盖其他场景的月份展示：

import DateFnsUtils from '@date-io/date-fns';
import { format } from 'date-fns';

class LocalizedUtils extends DateFnsUtils {
  // 覆盖月视图选择列表的月份展示
  getMonthShort(date: Date) {
    return format(date, 'MMMM');
  }
  // 覆盖日历头部、输入框等场景的月份展示
  getMonthText(date: Date) {
    return format(date, 'MMMM');
  }
  // 你原有的日期格式化逻辑
  getDayText(date: Date) {
    return format(date, 'do');
  }
}

// 外层Provider配置保持不变，注意修正你原代码中DatePicker的拼写错误
<MuiPickersUtilsProvider utils={LocalizedUtils}>
  <DatePicker {/* 你的原有props */} />
</MuiPickersUtilsProvider>

方案2：自定义组件渲染（仅当前组件生效） #

如果你只需要修改单个DatePicker的月份展示，不需要全局生效，可以直接用组件自带的renderMonth属性自定义渲染：

import { format } from 'date-fns';
import { DatePicker, Typography } from '@material-ui/pickers';

<DatePicker
  renderMonth={(monthDate, isSelected) => (
    <Typography>{format(monthDate, 'MMMM')}</Typography>
  )}
  {/* 其他原有props */}
/>

本地化场景补充 #

如果你需要展示非英文的月份（比如中文），不需要单独重写格式化方法，直接传入date-fns对应的本地化包即可：

import zhCN from 'date-fns/locale/zh-CN';
import DateFnsUtils from '@date-io/date-fns';

<MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhCN}>
  <DatePicker />
</MuiPickersUtilsProvider>

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