• Ant日期组件DatePicker日期国际化错误问题
  • 发布于 2个月前
  • 304 热度
    0 评论
  • 浅歌
  • 0 粉丝 27 篇博客
  •   
背景

手上的一个项目,使用umi-qiankun构建的微前端项目。一个版本提测发现几个模块的 DatePicker 日期显示有的是中文有的是英文。


问题现状
代码层
1.两个子应用代码实现是一样的,都已经配置了国际化
2.使用的是 antd 组件库的 ConfigProvider全局化配置
代码如下:
import ZH_CN from 'antd/lib/locale/zh_CN'
import {ConfigProviderProps} from 'antd/lib/config-provider/index'
// 堆代码 duidaima.com
const App = () => {
  return (
    <ConfigProvider locale={ZH_CN}>
      <div className={styles.content}>{props.children}</div>
    </ConfigProvider>
  )
}
引用的依赖库 antd 的版本也没差别

但是表现不一样。
表现层
这个异常面板的月份和星期都是英文
正常中文版

异常显示

咋办
猜-组件库版本问题

因为前段时间我统一把应用的antd都升级过,以为是版本原因。就去对比了一下这个版本差异,发现这个zh-cn的文件配置引用路径不一样,一个'antd/lib/locale-provider/zh_CN'一个'antd/lib/locale/zh_CN',尝试后不行。不过也是,这个引用只需要路径能够找到源文件配置问题就不大。


猜-时间转换插件问题
我开始怀疑是不是组件库版本替换了时间处理插件,比如moment换成了dayJs.尝试后发现不是这个原因。antd社区有人发言不仅需要配置antd国际化,还要配置moment的语言设置。
import moment from "moment";  
import "moment/locale/zh-cn";  
moment.locale("zh-cn");

当然,尝试也没用。还纠结是不是moment和antd版本不对应关系。


最终
总结
还是要沉心静气,好好看社区。毕竟这么多开发者肯定有比你先行者!!!看到了一个大哥提供信息(反手就是一个赞)umi配置的文件配置了  ignoreMomentLocale: true后,会把中文在内的国际化去除,所以配置国际化中文后还是无法生效。想用于减少尺寸,忽略moment的locale文件。
后来翻看几个项目配置对比,有项目走了的前辈优化代码没有几个项目统一,只有两个配置了。。。

用户评论