ANTD DatePicker Locale

Question

I have been working with ANTD since version 2.10. DatePicker had no problems with localization. When I switched to version 2.12.8 DataPicker began to display the months and days of the week in English, although the prompts in the TextBox are displayed correctly in any selected language. It seems that DatePicker does not interact correctly with the moment.js. How can I fix this? The application is built on the basis of Create-React-App.

...
import { LocaleProvider } from 'antd';
import ruRU from 'antd/lib/locale-provider/ru_RU';
...

<Provider store={store}>
    <Router>
        <LocaleProvider locale={ruRU}>
            <App/>
        </LocaleProvider>
    </Router>
</Provider>

Answer 1

This one line worked for me:

import 'moment/locale/ru';

See 'note' in Antd docs: antd range picker docs

Answer 2

import { ConfigProvider } from "antd";
import React from "react";
import moment from "moment";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import ru_RU from "antd/lib/locale/ru_RU";

import store from "./store";

moment.locale("ru");

ReactDOM.render(
  <ConfigProvider locale={ru_RU}>
    <Provider store={store}>
      <App/>
    </Provider>
  </ConfigProvider>,
  document.getElementById("root")
);

moment.locale("ru"); adding this line fix your problem and ConfigProvider is localize all antd components

Answer 3

You need import the dayjs and antd locale. This code worked for me:

import { ConfigProvider } from 'antd'
import es from 'antd/locale/es_ES'
import dayjs from 'dayjs'
import 'dayjs/locale/es'
dayjs.locale('es')

export default function IndexLayout ({ children }) {
  return (
    <ConfigProvider locale={es}>
      {children}
    </ConfigProvider>
  )
}

Antd's documentation: https://ant.design/components/config-provider#components-config-provider-demo-locale