antd DatePicker组件设置中文配置

2,656 阅读1分钟

原因

  • 起手项目配置的时候使用的是老版本的moment的中文配置包导致
  • 提示语和年可以正常展示,但是周和月份还是英文
  • 主要原因是 antd/lib/locale-provider/zh_CN 和 moment/locale/zh-cn 里面的包语言设置并不适用这个版本

安装依赖

npm i antd --save
nom i moment --save

原配置

import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';
...

...
<ConfigProvider locale={zhCN}>
    <DatePicker />
</ConfigProvider>

image.png

修改后的配置

-将 import 'moment/locale/zh-cn' 改成 import 'moment/dist/locale/zh-cn';

import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import 'moment/dist/locale/zh-cn';
...

...
<ConfigProvider locale={zhCN}>
    <DatePicker />
</ConfigProvider>

推荐在全局文件中引入这个配置

import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import 'moment/dist/locale/zh-cn';

...
...
<ConfigProvider locale={zhCN}>
    <APP />
</ConfigProvider>

image.png