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 @ 2020-07-27 17:26  唐宋元明清2188  阅读(3073)  评论(0)  编辑  收藏  举报