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

    @slide13
    frontend/web-developer
    Чтобы все названия месяцев при использовании 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'
      })
    Ответ написан
    1 комментарий