react+antd日期组件显示中英文(解决方案)

1.开发环境 react18+antd5
2.电脑系统 windwos11专业版
3.在使用react+antd开发的过程中,我们在使用日期组件的时候会遇到显示中英文的问题,下面我来分享一下我的解决方法。
4.react18+antd5使用日期组件显示中英文:
react+antd日期组件显示中英文(解决方案)_第1张图片

有很多人都遇到了这种情况;什么样的说法都有;但是就是没有一个能解决的;
可能是因为react和antd的版本不同的原因,下面我来分享一下我的方法

4-1.解决思路:

// 先查看官网,看官网是怎么描述的

react+antd日期组件显示中英文(解决方案)_第2张图片

//找到示例,看是怎么处理的

react+antd日期组件显示中英文(解决方案)_第3张图片

// 示例代码如下 1

react+antd日期组件显示中英文(解决方案)_第4张图片

// 示例代码如下 2

react+antd日期组件显示中英文(解决方案)_第5张图片

通过分析示例代码,发现官网是通过 dayjs 来实现的,
接下来我们就可以安装 dayjs 来测试一下

4-2.安装dayjs

npm i dayjs -S
// 在index.js中使用

import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
/*
* 处理 时间组件显示英文问题
* */
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

    
//效果如下

react+antd日期组件显示中英文(解决方案)_第6张图片

 注意:使用moment.js 依然会显示英文,尝试多种方法依然无法解决,
可能是因为antd版本和moment版本的问题。

5.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。

你可能感兴趣的:(react+antd日期组件显示中英文(解决方案))