将Antd 的日期选择框里面的文字改为中文

最新推荐文章于 2024-07-24 10:52:18 发布

原创最新推荐文章于 2024-07-24 10:52:18 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

web前端专栏收录该内容

39 篇文章

订阅专栏

本文介绍如何在Ant Design中使用中文语言包配置日期选择器，通过导入moment.js和AntD的locale模块，实现日期控件显示为中文。

// 以下4行引入解决日期控件英文的问题
import moment from 'moment'
import locale from 'antd/lib/date-picker/locale/zh_CN'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

<RangePicker
  style={{ width: '306px' }}
  locale={locale}
  onChange={this.handleChange.bind(this, 'createTime')}
/>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

最亮的心

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Python百日进阶-Web开发-Feffery】Day322 - fac数据录入5：AntdDateRangePicker日期范围选择框

专注于医院数据分析技术与系统开发的创作与分享。

03-30

364

文章目录前言：fac是什么？“人生苦短，我用Python；Web开发，首选Feffery！”↓↓↓ 今日笔记 ↓↓↓五、fac数据录入：AntdDateRangePicker日期范围选择框5.1 语法与参数5.1.1 语法5.1.2 主要参数说明5.2 使用示例5.2.1 基础的日期范围选择控件5.2.2 添加时间选择5.2.3 自定义空白填充文字5.2.4 修改时间粒度5.2.5 禁用开始或结束输入框，默认为当前系统时间5.2.6 回调示例前言：fac是什么？ feffery-antd-compon

antd-react 组件库工作以来的总结

weixin_44457030的博客

11-13

1633

antd-react 组件库工作以来的总结

参与评论您还未登录，请先登录后发表或查看评论

Antd日期选择框中文【最新版本，亲测有效】

小道仙的后宫

04-10

5533

不得不说Antd的确蛮好用的，但是还是要吐槽，遇到一点问题百度基本上解决不了，而且文档写的也的确不怎么样就这个日期选择器，默认竟然不支持中文？？？而且百度了半天都是什么鬼？？？这是默认效果这是之后的效果第一步：根据官方文档导入下面的代码（你可以放在使用日期选择框的界面也可以放在main.js里面） // import zhCN from 'ant-design-vue/lib/loc...

react-antd-date日期默认英文，改成中文（中英混合）

outstanding木槿

10-25

1601

【代码】react-antd-date日期默认英文，改成中文（中英混合）

antd时间选择器，设置显示中文

T3165919332的博客

01-12

1325

在实现react，里面引入antd时间选择器，默认显示为英文。入口处使用ConfigProvider全局化配置，设置。

Ant Design Vue 中 DatePicker 日期选择框 placeholder 改成中文设置

大乌鸦

07-06

8847

关于怎样让日期里面全是中文的操作 <a-range-picker @change="onChange" /> 首先你要引入相关js 然后改成中文的操作是在main.js里面这样写 import moment from 'moment'; import locale from 'ant-design-vue/lib/locale-provider/zh_CN'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); 这样你的日

Antd中RangePicker组件弹出的日历中英混杂，月份和周显示为英问题

Mqyyy的博客

08-17

5228

解决Antd中RangePicker组件弹出的日历中英混杂，月份和周显示为英问题

前端antd-design-vue组件库日期范围组件增加长期有效，10年，20年怎么处理

weixin_45439379的博客

12-08

1892

十年，二十年，长期有效

antd RangePicker 格式化季度 YYYY- QQ 受控组件 / 非受控组件

qq_42359718的博客

06-27

575

Antd 切换 RangePicker formate 季度： YYYY - QQ 月： YYYY - MM 处理方式

用Antd和React写的Antd介绍网站，源码有详细注释

a986597353的博客

11-06

3256

git仓库地址：https://github.com/mingChen2017/Antd-React-example 演示地址：39.108.54.113/antd 这是一个非常简单的例子，利用了AntD和react，希望能帮助初学者学习，特别是在ModuleDescribe.js，即组件->组件介绍这一页面有非常多详细的注释，后续我会继续完善。 import Re

antd 时间框组件如何修改默认中文？

Xpy 的博客

04-11

1066

antd 官方文档方案：https://ant.design/docs/react/faq-cn#/ import moment from 'moment' import locale from 'antd/lib/date-picker/locale/zh_CN' import 'moment/locale/zh-cn' moment.locale('zh-cn') <RangePicker locale={locale}/> 改之前改之后 ...

Antd-4.x-DatePicker日期组件汉化问题

weixin_40532650的博客

02-25

1780

1.问题场景 2.修复后 3.原因按照antd官方给出的配置使用； antd4.x-DatePicker国际化配置 / 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment/locale/zh-cn'; import locale from 'antd/lib/locale/zh_CN'; <ConfigProvider locale={locale}>

ant-design-vue日期汉化

weixin_46990364的博客

12-04

468

【代码】ant-design-vue日期汉化。

antdesign 组件中的文字默认是英文怎么办

笔记、经验、日常分享

04-18

2655

antdesign（antd）目前的默认文案（语言）是英文，如果需要使用其他语言，需要引入语言包，进行一下配置即可。通过在应用的最外层包裹ConfigProvider组件，并为其locale属性传入中文语言包zh_CN来实现。这样，所有的Ant Design组件都将默认使用中文显示。

移动端蚂蚁组件（antd-mobile）- 解决日期组件中的语系问题

qq_40637612的博客

08-24

1365

目标：期望：我们项目需要有繁简体两种语系，对于一般的选择器是有可配置文案的属性的，但是日期选择器却没有。通过研究还是发现了这个属性是可以配置语系问题的。试过之后发现竟然就是没有我需要的繁体（zh_TW）。无奈之下，只能研究看这些语系是怎么写的，我仿照写个繁体的语系文件放到包里，但很快这个想法被我pass了，一个是因为语系并不是直接写在这些文件里的，另一个因为我们项目较多，人员也多，万一下次不是我改，别人可能就不知道到底怎样修改。于是又产生了另一个想法，包不能改，那我就在文

antd DatePicker日期修改为中文显示

郑板桥30的博客

03-10

2942

antd默认引入的组件月份展示是英文的，如果想换成中文显示也很简单。

【Ant Design】解决使用日期时间类组件中文汉化无效

day day up

07-24

1455

antd 解决使用日期时间类组件中文（汉化）部分为生效，不同版本可能依赖的时间库也是不一样的，具体的配置还需要参照官网文档。

react-antd设置DatePicker日期控件中文显示

outstanding木槿

03-28

2039

【代码】react-antd设置DatePicker日期控件中文显示。

react使用日历Calendar汉化

lanseguhui的博客

03-19

3559

按照API默认显示为英文汉化 import locale from 'antd/lib/calendar/locale/zh_CN'; <Calendar locale={locale} dateCellRender={dateCellRender} monthCellRender={monthCellRender} />

antd 日期选择器中文

最新发布

07-17

在使用 Ant Design 的日期选择器组件（`DatePicker`）时，实现中文显示需要从两个方面入手：一是通过全局配置使所有组件中文化；二是确保 `moment` 对象的语言设置与界面语言一致。 ### 全局中文化配置为了使包括 `DatePicker` 和 `Transfer` 在内的组件默认以中文形式展示，可以在应用入口处使用 `ConfigProvider` 组件包裹整个应用，并指定 `locale` 为 `zhCN`。同时，还需要引入 `moment/locale/zh-cn` 来确保 `moment` 对象的时间格式也是中文风格[^1]。以下是关键代码： ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import reportWebVitals from './reportWebVitals'; import { Routes } from './router/index'; import configureStore from './redux/store'; import { Provider } from 'react-redux'; import { ConfigProvider } from 'antd'; import zhCN from 'antd/lib/locale/zh_CN'; import 'moment/locale/zh-cn'; let store = configureStore(); ReactDOM.render( <ConfigProvider locale={zhCN}> <Provider store={store}> {Routes} </Provider> </ConfigProvider>, document.getElementById('root') ); ``` ### DatePicker 使用中文语言对于 `DatePicker` 组件本身，除了上述全局配置外，还需注意以下几点来确保其正确地显示中文内容： - **使用 `moment` 处理日期**：当处理用户选择的日期时，建议使用 `moment` 库来解析和格式化日期字符串，这样可以保证时间对象的语言一致性。 - **监听 `onChange` 事件**：可以通过监听 `onChange` 事件获取用户选择的日期值，并将其转换为所需的格式[^2]。示例代码如下： ```javascript import moment from 'moment'; // ... onChange(date, dateString) { console.log(date, dateString); this.createTime = moment(dateString).format('YYYY-MM-DD'); } ``` ### 注意事项 - 确保项目中已安装 `moment` 及其对应的中文包，以便支持中文日期格式。 - 如果您的项目基于 Vue 构建，则应参考 Ant Design Vue 版本的相关文档进行相应的调整。以上方法能够有效确保 Ant Design 中的 `DatePicker` 组件以及其他相关组件在页面上以中文形式正确展示。