How to change month names in material-ui pickers DatePicker?

Question

Working with date/time

Good afternoon, I localized the names of the months in material-ui pickers: DatePicker using date-fns. The names of the months are displayed in the accusative case: September, October... It is necessary to display the months in the nominative case. How to change the names passed to picker? I suspect that this is possible through DateFnsUtils, I found the
getMonthArray () method in this class, but I can’t understand in what format it should give months

Answer 1

In order for all month names to be in the nominative case when using date-fns, formatted month names (i.e. formattingMonthValues) must be removed from the locale.
To do this, either:
1. Create a separate file with the locale, copy into it everything from the locale available in date-fns ru. Using buildLocalizeFn, we overwrite the months and import this file wherever needed instead of the locale from date-fns/locale/ru.
Code for modified ru locale without formatted months:

import formatDistance from "date-fns/locale/ru/_lib/formatDistance";
import formatRelative from "date-fns/locale/ru/_lib/formatRelative";
import localize from "date-fns/locale/ru/_lib/localize";
import match from "date-fns/locale/ru/_lib/match";
import formatLong from "date-fns/locale/ru/_lib/formatLong";
import buildLocalizeFn from 'date-fns/locale/_lib/buildLocalizeFn'

const monthValues = {
  narrow: ["Я", "Ф", "М", "А", "М", "И", "И", "А", "С", "О", "Н", "Д"],
  abbreviated: [
    "янв.",
    "фев.",
    "март",
    "апр.",
    "май",
    "июнь",
    "июль",
    "авг.",
    "сент.",
    "окт.",
    "нояб.",
    "дек."
  ],
  wide: [
    "январь",
    "февраль",
    "март",
    "апрель",
    "май",
    "июнь",
    "июль",
    "август",
    "сентябрь",
    "октябрь",
    "ноябрь",
    "декабрь"
  ]
};

const ruLocale = {
  formatDistance,
  formatLong,
  formatRelative,
  localize: {
    ...localize,
    month: buildLocalizeFn({
      values: monthValues,
      defaultWidth: "wide",
      defaultFormattingWidth: "wide"
    })
  },
  match,
  options: {
    weekStartsOn: 1,
    firstWeekContainsDate: 1
  }
};

export default ruLocale;

2. Overwrite the desired months in the existing locale directly after import

import ru from "date-fns/locale/ru";
import buildLocalizeFn from 'date-fns/locale/_lib/buildLocalizeFn'
  
  const monthValues = {
    narrow: ["Я", "Ф", "М", "А", "М", "И", "И", "А", "С", "О", "Н", "Д"],
    abbreviated: [
      "янв.",
      "фев.",
      "март",
      "апр.",
      "май",
      "июнь",
      "июль",
      "авг.",
      "сент.",
      "окт.",
      "нояб.",
      "дек."
    ],
    wide: [
      "январь",
      "февраль",
      "март",
      "апрель",
      "май",
      "июнь",
      "июль",
      "август",
      "сентябрь",
      "октябрь",
      "ноябрь",
      "декабрь"
    ]
  };

  ru.localize.month = buildLocalizeFn({
    values: monthValues,
    defaultWidth: 'wide',
    defaultFormattingWidth: 'wide'
  })