记一个 antd DatePicker 语言问题

最新推荐文章于 2025-02-28 16:17:47 发布

「已注销」

最新推荐文章于 2025-02-28 16:17:47 发布

阅读量3.6k

点赞数

分类专栏：问题记录文章标签： react antd datepicker

本文链接：https://blog.youkuaiyun.com/sansan_7957/article/details/93752894

版权

问题记录专栏收录该内容

20 篇文章

订阅专栏

在使用antd的DatePicker时，尝试设置为英文但组件仍显示中文。问题在于DatePicker的locale是从value中读取，需要先设置moment的locale。在设置无效后，发现value的日期仍然是中文。解决方案是在使用DatePicker的地方明确设置locale，或者将其放入getPopupContainer函数中以确保生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

想要设置组件为英文，代码如下：

import locale from 'antd/lib/date-picker/locale/en_US';
...
省略其他代码
...
<RangePicker
	{
		...{
			locale
		}
	}
/>

但是并没有得到想要的效果，由下图中 6月 2019 可以看到应该是已经修改为英文顺序了，但是组件中的字还是中文的。
在这里插入图片描述

问题原因

在这里插入图片描述

注意：DatePicker、MonthPicker、RangePicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。

文档中说：

部分 locale 是从 value 中读取，这个 value 就是组件中的每个日期的值，它们都是 moment类型。
所以要先设置 moment 的 locale为英文，但是如下图在文件头部添加以下代码依然不可以。

import moment from 'moment';
import 'moment/locale/en-gb';
moment.locale('en-gb');

可以把选中的日期打印出来看一下，发现 moment 是中文的。
在这里插入图片描述

解决办法

在使用 moment 的地方添加 moment.locale('en')，比如我设置了不可选择的日期：

// 日期范围限制
moment.locale('en');
const start = moment().startOf('month');
const end = moment().month(moment().month() + 6).endOf('month');
function disabledDate(current) {
	return current && (start > current.valueOf() || end < current.valueOf());
}

如果你不用设置不可选择日期或这初始化怎么办？
经过一翻测试只要把 moment.locale('en') 放到 render 函数里就能生效了。?
至于为什么我也不知道(╥﹏╥)