Why does date-fns localize in genitive (instead of nominative)?

Question

Node.js

There are nominative and genitive cases in the documentation, but I did not find how to choose a specific nominative.

https://github.com/date-fns/date-fns/blob/master/s... - here, in principle, the names of the months in the nominative case are contained, but why they are used in the genitive is completely unclear. Help me figure it out..

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

Answer 1

Example from: https://material-ui-pickers.dev/localization/date-fns - how to set up the nominative case for Russian localization. Just in case, I'm posting the code here:

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;