ant design 使用 DatePicker 单独修改国际化语言为中文不管用？

Question

依赖库版本： antd@4.6.6、 moment@2.29.1

使用 codesandbox 的演示：

配置 locale 后：

演示是正常的！

_

项目中代码是一样的，可是国际化语言没有被更改：

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

还是跟之前一样：

全局也没有做统一的配置，请问是怎么回事？

Answer 1

新版本的moment路径改了，需要改成如下配置：

import { BrowserRouter } from 'react-router-dom';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
import 'moment/dist/locale/zh-cn';
import router from './routes';

function App() {
  return (
    <ConfigProvider locale={zhCN}>
      <BrowserRouter>
        {router}
      </BrowserRouter>
    </ConfigProvider>
  );
}

export default App;

Answer 2

我也遇到了同样的问题，我解决了他！

如果本地开发环境开启了 Webpack 按需加载语言包 moment-locales-webpack-plugin
http://momentjs.cn/docs/#/use-it/webpack/

那么恭喜你一定要配置好它，如果落下了它，runtime 的程序就不会成功的 import origin 对应语言包。

so

// webpack.config.js
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = {
    plugins: [
        // 剥离除 “en” 以外的所有语言环境。
        new MomentLocalesPlugin(),

        // 或者：剥离除 “en”、“es-us” 和 “ru” 以外的所有语言环境。
        //（“en” 内置于 Moment 中，无法移除）
        new MomentLocalesPlugin({
            localesToKeep: ['es-us', 'ru', 'zh-cn', ...any],
        }),
    ],
};

祝好。

Answer 3

datepicker中国际化还要做日历的国际化。看源码国际化分两部分。

Answer 4

分享个element-ui动态更改语言的例子，element-ui动态更改语言配置后，日历组件要调用mountPicker函数重新渲染一次才能正常显示语言，否则会出现上图部分翻译失败的情况。

Answer 5

就是渲染问题，一般做国际化切换的话都要重新加载一下页面保证页面全部被国际化。

Answer 6

不知道你是不是同时引用了moment，看你未中文化的都是moment的部分：
Try this:

import locale from 'antd/es/date-picker/locale/zh_CN';
// 这里也要引入moment
import moment from 'moment';
import 'moment/locale/zh-cn';

<DatePicker locale={locale} />

Answer 7

按照你的也试过了不行，这是 locale 打印的结果：

代码就这么多：

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

运行结果：

哪里出了问题么，是在 antd pro 项目中的代码，会不会是全局配置过什么东西影响了，我看了好像那些配置都跟这个没有关系，这是配置文件：

Answer 8

我也一样，两个项目底座一样，但是一个好使一个不好使

然后我发现 umi 文件里 两个文件的 不同 ，（左不好用右好用）

但是不知道怎么更改

Answer 9

同遇到这个问题 请问找到解决方案了吗

Answer 10

考虑可能是你的moment版本和antd更新了，我这边和你出现了一样的情况，捣鼓半天都不行。最后是这样改的，已修复本地化失败的问题。

项目内引入变化：

日期组件配置locale变化：

最后是我的包安装的对应的版本：