官网: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
引用处理:
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
1 <DatePicker
2 picker="month" locale={LocalFormat.getDefinedChineseLocal()}
3 open={this.state.isDefinedDatePopupOpened}
4 onChange={(date, dateString) => this.OnDefinedMonthSelected(dateString)}
5
显示效果:
作者:唐宋元明清2188