Почему date-fns локализирует в родительном падеже (вместо именительного)?

Question

[ikerya]

В документации есть именительный и родительный падежи, но как выбрать конкретно именительный, я не нашёл.

https://github.com/date-fns/date-fns/blob/master/s... — тут, в принципе, содержатся имена месяцев в именительном падеже, но почему используются в родительном — совсем неясно. Помогите разобраться..

CodeSandbox

import React from "react";
import "date-fns";
import DateFnsUtils from "@date-io/date-fns";
import ru from "date-fns/locale/ru";
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker
} from "@material-ui/pickers";

export default function App() {
  const date = new Date();

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils} locale={ru}>
      <KeyboardDatePicker
        disableToolbar
        autoOk
        label="Начало"
        variant="inline"
        format="dd.MM.yyyy"
        value={date}
      />
    </MuiPickersUtilsProvider>
  );
}

Comments

[Robur]

тут скорее вопрос не к date-fns, а к MuiPickerUtilsProvider или KeyboardDatePicker

[ikerya]

Robur, Точно... Спасибо

Answer 1

[ikerya]

Пример из: https://material-ui-pickers.dev/localization/date-fns — как настроить именительный падеж для русской локализации. На всякий случай публикую код здесь:

import format from "date-fns/format";
import frLocale from "date-fns/locale/fr";
import ruLocale from "date-fns/locale/ru";
import enLocale from "date-fns/locale/en-US";
import DateFnsUtils from "@date-io/date-fns";
import MoreIcon from "@material-ui/icons/MoreVert";
import React, { useState, useCallback } from "react";
import { IconButton, Menu, MenuItem } from "@material-ui/core";
import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";

const localeMap = {
  en: enLocale,
  fr: frLocale,
  ru: ruLocale,
};

class RuLocalizedUtils extends DateFnsUtils {
  getCalendarHeaderText(date) {
    return format(date, "LLLL", { locale: this.locale });
  }

  getDatePickerHeaderText(date) {
    return format(date, "dd MMMM", { locale: this.locale });
  }
}

class FrLocalizedUtils extends DateFnsUtils {
  getDatePickerHeaderText(date) {
    return format(date, "d MMM yyyy", { locale: this.locale });
  }
}

const localeUtilsMap = {
  en: DateFnsUtils,
  fr: FrLocalizedUtils,
  ru: RuLocalizedUtils,
};

const localeFormatMap = {
  en: "MMMM d, yyyy",
  fr: "d MMM yyyy",
  ru: "d MMM yyyy",
};

const localeCancelLabelMap = {
  en: "cancel",
  fr: "annuler",
  ru: "отмена",
};

function DateFnsLocalizationExample() {
  const [locale, setLocale] = useState("ru");
  const [anchorEl, setAnchorEl] = useState(null);
  const [selectedDate, handleDateChange] = useState(new Date());

  const handleMenuOpen = useCallback(e => {
    e.stopPropagation();
    setAnchorEl(e.currentTarget);
  }, []);

  const selectLocale = useCallback(locale => {
    setLocale(locale);
    setAnchorEl(null);
  }, []);

  return (
    <MuiPickersUtilsProvider utils={localeUtilsMap[locale]} locale={localeMap[locale]}>
      <DatePicker
        value={selectedDate}
        onChange={handleDateChange}
        format={localeFormatMap[locale]}
        cancelLabel={localeCancelLabelMap[locale]}
        InputProps={{
          endAdornment: (
            <IconButton
              aria-label="Select locale"
              onClick={handleMenuOpen}
              aria-owns={anchorEl ? "locale-menu" : undefined}
            >
              <MoreIcon />
            </IconButton>
          ),
        }}
      />

      <Menu
        id="locale-menu"
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={() => setAnchorEl(null)}
      >
        {Object.keys(localeMap).map(localeItem => (
          <MenuItem
            key={localeItem}
            selected={localeItem === locale}
            onClick={() => selectLocale(localeItem)}
          >
            {localeItem}
          </MenuItem>
        ))}
      </Menu>
    </MuiPickersUtilsProvider>
  );
}

export default DateFnsLocalizationExample;

Comments

[stayacid]

Проще говоря, вместо MMMM использовать LLLL. Спасибо за решение