javascript - Change react antd DatePicker language - Stack Overflow

admin管理员组

文章数量:1304971

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:

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

• javascript
• reactjs
• datepicker
• locale
• antd

Share Improve this question Follow edited Dec 29, 2021 at 13:57 Ala Ben Aicha asked Dec 29, 2021 at 13:46 Ala Ben AichaAla Ben Aicha 1,28644 gold badges1818 silver badges3636 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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/ponents/date-picker#localization

本文标签： javascriptChange react antd DatePicker languageStack Overflow