问答

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

作者:admin 2021-05-09 我要评论

依赖库版本: antd@4.6.6、 moment@2.29.1 使用 codesandbox 的演示: 配置 locale 后: 演示是正常的! _ 项目中代码是一样的,可是国际化语言没有被更改: imp...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

使用 codesandbox 的演示:

image.png

配置 locale 后:
image.png

演示是正常的!

_

项目中代码是一样的,可是国际化语言没有被更改:
    import "moment/locale/zh-cn";
    import locale from "antd/es/date-picker/locale/zh_CN"; 
    
    <DatePicker locale={locale} />
     

还是跟之前一样:
image.png

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

###

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

###

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

###

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

###

不知道你是不是同时引用了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} />
###

按照你的也试过了不行,这是 locale 打印的结果:
image.png

代码就这么多:

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

运行结果:
image.png

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

###

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

然后我发现 umi 文件里 image.png 两个文件的 不同 ,(左不好用右好用) image.png

但是不知道怎么更改

###

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

###

我也遇到了同样的问题,我解决了他!

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

那么恭喜你一定要配置好它,如果落下了它,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],
        }),
    ],
};

祝好。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • app内的web页面,img路径对,但是不显

    app内的web页面,img路径对,但是不显

  • 如何做下载功能?

    如何做下载功能?

  • 复杂正则表达式,实现思路

    复杂正则表达式,实现思路

  • vue一段简单的代码出现奇怪的问题?

    vue一段简单的代码出现奇怪的问题?

腾讯云代理商
海外云服务器