antd 时间组件显示设置中文

antd DatePicker 默认显示为英文 即en-US

• 切换local 给出的api 为 locale 里面可以传递一个对象

{
  "lang": {
    "locale": "en_US",
    "placeholder": "Select date",
    "rangePlaceholder": ["Start date", "End date"],
    "today": "Today",
    "now": "Now",
    "backToToday": "Back to today",
    "ok": "OK",
    "clear": "Clear",
    "month": "Month",
    "year": "Year",
    "timeSelect": "Select time",
    "dateSelect": "Select date",
    "monthSelect": "Choose a month",
    "yearSelect": "Choose a year",
    "decadeSelect": "Choose a decade",
    "yearFormat": "YYYY",
    "dateFormat": "M/D/YYYY",
    "dayFormat": "D",
    "dateTimeFormat": "M/D/YYYY HH:mm:ss",
    "monthFormat": "MMMM",
    "monthBeforeYear": true,
    "previousMonth": "Previous month (PageUp)",
    "nextMonth": "Next month (PageDown)",
    "previousYear": "Last year (Control + left)",
    "nextYear": "Next year (Control + right)",
    "previousDecade": "Last decade",
    "nextDecade": "Next decade",
    "previousCentury": "Last century",
    "nextCentury": "Next century",
    "shortWeekDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    "shortMonths": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ]
  },
  "timePickerLocale": {
    "placeholder": "Select time"
  },
  "dateFormat": "YYYY-MM-DD",
  "dateTimeFormat": "YYYY-MM-DD HH:mm:ss",
  "weekFormat": "YYYY-wo",
  "monthFormat": "YYYY-MM"
}

如果需要个性化或者单独修改可以更改里面的部分属性 但这个是只能影响到当前插件。 若后来者需要调整很难单独处理，写个工具函数吧！

方法一

import zhCN from 'antd/lib/locale/zh_CN'

const ZhCNLocale: typeof zhCN = zhCN;
ZhCNLocale.DatePicker!.lang = {
  ...zhCN.DatePicker!.lang,
  monthFormat: 'M月', 
  shortWeekDays: ['日', '一', '二', '三', '四', '五', '六']
}

//将locale 注入
  <RangePicker
                locale = {ZhCNLocale.DatePicker}
                allowClear={false}
                format="YYYY-MM-DD HH"
                showTime={{ format: 'HH' }}
              />

方法二

import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
<DatePicker locale={locale} />;

OK 只要引入ZhCNLocale.DatePicker 都会得到一个中文但并不够，此时全局还是英文的 修改全局方案

// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import locale from 'antd/locale/zh_CN';


<ConfigProvider locale={locale}>
  <DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
</ConfigProvider>;

但此处设置完成依然可能不生效，如果项目引入的dayjs 版本与antd 引入版本不一致 要先处理版本 不同实例也会导致失效。

踩坑路上的一个小坑 填了