DatePicker component from antd displaying wrong language

Question

I'm using antd at 3.26.20 and currently setting the default locale in my entry file using the ConfigProvider component, but the locale is not being applied to all components.

Here is what I'm doing:

import React from 'react';
import ReactDOM from 'react-dom';
import { ConfigProvider } from 'antd';
import ptBR from 'antd/es/locale/pt_BR'
ReactDOM.render(
    <ConfigProvider locale={ptBR} >
        <MYApp/>
    </ConfigProvider>
)

According to the antd documentation (https://3x.ant.design/components/date-picker/), the component's default language should be overridden by the locale defined in ConfigProvider and for some DatePicker components in my app this behavior is being seen but for others, I need to import the following package in the beginning:

import 'moment/locale/pt-br'

For those DatePicker components that are working properly, I didn't have to import any package from moment lib.

Does anyone know why this is happening?

Thank you!

Answer 1

Take a look into ConfigProvider docs: You need to set moment locale in your root component and also check if you don't have two different versions of it.

In your app root file do the following:

// entry file file

import {ConfigProvider} from 'antd'
import ptBR from 'antd/es/locale/pt_BR'
import moment from 'moment'

// don't forget to import moment locale
import 'moment/locale/pt-br'

// set moment locale too
moment.locale('pt-br')

ReactDOM.render(
  <ConfigProvider locale={ptBR}>
    <MYApp/>
  </ConfigProvider>
)

All locale/language configs must be done in your root component. If your app have dynamic language switch you can have a look into this example.