Search code examples
javascriptreactjsdatepickerlocaleantd

Change react antd DatePicker language


How Can I set the antd Datepicker language to french?

I tried this :

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import moment from "moment";
import { DatePicker, Space, ConfigProvider } from "antd";
import frFR from "antd/lib/locale/fr_FR";

function onChange(date, dateString) {
  console.log(date, dateString);
}

ReactDOM.render(
  <Space direction="vertical">
    <ConfigProvider locale={frFR}>
      <DatePicker
        onChange={onChange}
        defaultValue={moment("2015-01-01", "YYYY-MM-DD")}
      />
    </ConfigProvider>
  </Space>,
  document.getElementById("container")
);

The preview language is still in English.

Here is a running code: https://codesandbox.io/s/basic-antd-datepicker-language-n9ue7


Solution

  • From the ant design doc

    import 'moment/locale/zh-cn';
    import locale from 'antd/es/date-picker/locale/zh_CN';
    
    <DatePicker locale={locale} />;
    

    https://ant.design/components/date-picker#localization