Search code examples
reactjslocalizationantd

Localization in AntD component

I'm creating a React project where I use Calendar component from AntD. I needed to translate it into Russian, so I did this:

import ru_RU from "antd/lib/locale/ru_RU";
import { ConfigProvider } from "antd";
...
<ConfigProvider locale={ru_RU}>
    <StyledCalendar />
</ConfigProvider>

That didn't work for me (it did work on my mac, but it doesn't work on my windows PC). What could be done about that? I tried to upgrade the version of my AntD, but it didn't help.
P.S. full code on my code sandbox: https://codesandbox.io/s/intelligent-cdn-nrpgh6?file=/src/App.js:2589-2843

Solution

  • Well, i figured it out. In addition to what i alredy showed, you need to add some more code from dayjs, so it would look like this:

    import ru_RU from "antd/lib/locale/ru_RU";
import { ConfigProvider } from "antd";
import dayjs from "dayjs";
import "dayjs/locale/ru";
dayjs.locale("ru");
...
<ConfigProvider locale={ru_RU}>
    <StyledCalendar />
</ConfigProvider>

    There can be another issue: it showed me this message in my VSCode: Could not find a declaration file for module 'dayjs/locale/ru'
    In that case, go to mode_modules/dayjs/locale/index.d.ts and replace it with this:

    /// <reference path="./types.d.ts" />

declare module 'dayjs/locale/ru' {   // of course, it can be any locale you need, not only russian
  namespace locale {
    interface Locale extends ILocale {}
  }

  const locale: locale.Locale

  export = locale
}