zoukankan      html  css  js  c++  java
  • 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   />

    显示效果:

  • 相关阅读:
    第九周作业
    2020软件工程作业02
    自我介绍
    Java学习开发第三阶段总结
    Java学习开发第一阶段总结
    2019春总结作业
    基础作业
    2019春第四次课程设计实验报告
    2019春第三次课程设计实验报告
    2019春第二次课程设计实验报告
  • 原文地址:https://www.cnblogs.com/kybs0/p/13386546.html
Copyright © 2011-2022 走看看