Как изменить названия месяцев в material-ui pickers DatePicker?

Question

[d_moroz11]

Доброго дня, локализировал названия месяцев в material-ui pickers: DatePicker, использую date-fns. Названия месяцев отображаются в винительном падеже: Сентября, Октября... Нужно отображать месяцы в именительном падеже. Как изменить названия передаваемые в пикер? Подозреваю что это возможно через DateFnsUtils нашел в этом класе метод
getMonthArray() но не могу понять в каком формате он должен отдавать месяца

Answer 1

[Алексей]

Чтобы все названия месяцев при использовании date-fns были в именительном падеже необходимо убрать из локали форматированные названия месяцев (т.е. formattingMonthValues).

Для этого либо:
1. Создаем отдельный файл с локалью, копируем в него все из имеющейся в date-fns ru локали. С помощью buildLocalizeFn перезаписываем месяцы и импортируем везде, где нужно этот файл вместо локали из date-fns/locale/ru.

Код для измененной ru локали без форматированных месяцев:

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. Перезаписываем нужные месяцы в имеющейся локали напрямую после импорта

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'
  })

Comments

[d_moroz11]

Оба решения рабочие, спасибо Алексей)