antd的datepicker之不能汉化解决方案笔记

之前没太注意,今天偶然发现。。。

import React from 'react';
import {DatePicker} from 'antd';
const { RangePicker } = DatePicker;

export default function Fuck (props){
    return (<RangePicker/>)
}
复制代码

这样,默认都是英文(官网上的demo虽然有的是中文的,但是在codepen中打开还是英文)

度娘了很久,终得不到解决方案。。遂。。自己刨。。

即使

import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
复制代码

或者

import locale from 'antd/lib/date-picker/locale/zh_CN';

<RangePicker locale={locale} />;
复制代码

也还是不行。 要么不起作用,要么,就是星期几的地方 还是英文。

类似于这样

后来,我去看了

发现里面有对星期几的locale处理,而在
中是没有的

于是乎

import locale from 'antd/lib/date-picker/locale/zh_CN';
import 'moment/locale/zh-cn';

<RangePicker locale={locale}/>
复制代码

就搞定了

 "antd": "^3.16.5",
 "react": "^16.5.2",
复制代码

下是可以的。笔记打完收工。


当你终于脱胎换骨,一定会感谢曾经的孤独。

转载于:https://juejin.im/post/5d0750f56fb9a07f03573af5

在使用 Ant Design 的 `DatePicker` 组件时,若遇到设置中文语言无效的问题,通常是由于 locale 配置方式不正确或版本兼容性问题导致的。以下是几种有效的解决方案: - 使用 `locale` 属性直接指定中文语言包。可以通过从 `antd/lib/date-picker/locale/zh_CN` 导入中文 locale 对象,并将其传递给 `DatePicker` 组件的 `locale` 属性来实现中文显示[^2]。例如: ```jsx import locale from 'antd/lib/date-picker/locale/zh_CN'; <DatePicker locale={locale} />; ``` - 如果项目中使用了按需加载方案(如 babel-plugin-import),则需要确保正确引入 locale 文件。可以尝试从 `antd/es/date-picker/locale/zh_CN` 引入,并使用 `moment` 设置本地化语言[^2]: ```jsx import zhCN from 'antd/es/date-picker/locale/zh_CN'; import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); <DatePicker locale={zhCN} />; ``` - 在某些版本中,可能需要全局设置 Ant Design 的默认 locale。可以通过 `ConfigProvider` 组件来实现全局配置,确保所有子组件都继承中文语言设置[^2]: ```jsx import { ConfigProvider } from 'antd'; import zhCN from 'antd/es/locale/zh_CN'; import 'moment/locale/zh-cn'; import moment from 'moment'; moment.locale('zh-cn'); <ConfigProvider locale={zhCN}> <App /> </ConfigProvider>; ``` - 检查 Ant Design 和 Moment.js 的版本是否兼容。如果使用的是较旧版本的 Ant Design(如 3.x),某些 locale 特性可能未被完全支持。建议升级到最新稳定版本以获得更好的兼容性和功能支持。 通过上述方法之一,应该能够解决 Ant Design 的 `DatePicker` 组件在设置中文语言时无效的问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值