antd 时间类组件的国际化 locale 设置不生效 解决方案汇总

antd 时间类组件的国际化 locale 设置不生效，踩坑之路和解决办法

问题

如图所示，antd 时间类组件中英文混合显示：

初始配置代码如下：

import './index.css';
import './global.less';

import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';
import noData from './assets/noData.svg';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ConfigProvider locale={zhCN}>
      <App />
    </ConfigProvider>
  </React.StrictMode>,
);

antd 和 moment 版本如下：

"antd": "4.23.5",
"moment": "^2.29.4",

踩坑之路

1. 按照 antd 官网进行配置
   • 组件国际化配置
   • ConfigProvider全局化配置
   • locale 设置不生效

全局配置完以后并不生效，给单个组件设置 locale 也不生效。此时的配置如下：

import './index.css';
import './global.less';
import 'moment/locale/zh-cn';

import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import moment from 'moment';
import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';
import noData from './assets/noData.svg';
moment.locale('zh-cn');

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ConfigProvider locale={zhCN} renderEmpty={customizeRenderEmpty}>
      <App />
    </ConfigProvider>
  </React.StrictMode>,
);

按照官网提示，如果项目中依赖的 moment 版本和 antd 依赖的 moment 版本 无法兼容，通过npm ls moment查看版本号并重新安装不同版本解决兼容性问题

新版本号如下：

"antd": "^4.24.6",
"moment": "^2.29.2",

但还是不生效！！！

2. 开始谷歌搜索答案，网上解决方案杂七杂八的，就不一一列举了，大多跟官网给的解答一样。说几个可能有用的：

• 把antd版本降为4.2.0。个人不推荐，一般都是升级使用新版本，不推荐降级使用；
• 按照 踩坑之路 的配置以后，移除node_modules和 package-lock.json 或者 yarn.lock，然后重新安装 ；
• 将 import 'moment/locale/zh-cn'; 修改为 import 'moment/dist/locale/zh-cn';（该方法对我的项目代码生效，修改后效果如下）
  

我只是搬运工

一些其他的可能的解决方案，大家可参考这个 issue：
https://github.com/ant-design/ant-design/issues/23891