Antd DatePicker 语言项-显示中文月份

官网:https://ant.design/components/date-picker-cn/

如果要显示中文,官网是这么指导的:

但是,设置后并没有生效!原因是默认的中文local文件并没有月份的format格式:

解决:

根据官网local的格式,添加本地local对象即可

复制代码
 1 import { PickerLocale } from 'antd/es/date-picker/generatePicker';
 2 class LocalHelper {
 3   getDefinedChineseLocal() {
 4     let definedChineseLocal: PickerLocale = {
 5       lang: {
 6         locale: 'zh_CN',
 7         placeholder: '请选择日期',
 8         rangePlaceholder: ['Start date', 'End date'],
 9         today: 'Today',
10         now: 'Now',
11         backToToday: 'Back to today',
12         ok: 'Ok',
13         clear: 'Clear',
14         month: 'Month',
15         year: 'Year',
16         timeSelect: 'Select time',
17         dateSelect: 'Select date',
18         monthSelect: 'Choose a month',
19         yearSelect: 'Choose a year',
20         decadeSelect: 'Choose a decade',
21         yearFormat: 'YYYY年',
22         dateFormat: 'M/D/YYYY',
23         dayFormat: 'D',
24         dateTimeFormat: 'M/D/YYYY HH:mm:ss',
25         monthFormat: 'M月',
26         monthBeforeYear: true,
27         previousMonth: 'Previous month (PageUp)',
28         nextMonth: 'Next month (PageDown)',
29         previousYear: 'Last year (Control + left)',
30         nextYear: 'Next year (Control + right)',
31         previousDecade: 'Last decade',
32         nextDecade: 'Next decade',
33         previousCentury: 'Last century',
34         nextCentury: 'Next century',
35       },
36       timePickerLocale: {
37         placeholder: 'Select time',
38       },
39       dateFormat: 'YYYY-MM-DD',
40       dateTimeFormat: 'YYYY-MM-DD HH:mm:ss',
41       weekFormat: 'YYYY-wo',
42       monthFormat: 'YYYY-MM',
43     };
44     return definedChineseLocal;
45   }
46 }
47 export const LocalFormat = new LocalHelper();
复制代码

引用处理:

1 import React from 'react';
2 import { DatePicker } from 'antd';
3 //默认的,不够用,使用自定义的local
4 // import locale from 'antd/es/date-picker/locale/zh_CN';
5 import { LocalFormat } from './localHelper';
6 import 'antd/dist/antd.css';
7 import './style.less';
1   <DatePicker
2     picker="month" locale={LocalFormat.getDefinedChineseLocal()}
3     open={this.state.isDefinedDatePopupOpened}
4     onChange={(date, dateString) => this.OnDefinedMonthSelected(dateString)}
5   />

显示效果:

 

posted @   唐宋元明清2188  阅读(3347)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示
剑桥
16:15发布
剑桥
16:15发布
7°
西南风
3级
空气质量
相对湿度
66%
今天
2°/10°
周三
2°/8°
周四
中雨
2°/7°