Antdv日期选择组件国际化问题

Antdv日期选择组件国际化问题

1.问题描述

项目依赖ant-design-vue组件库，在使用日期选择组件DatePicker时，组件内容默认展示为英文，如下图所示:

现需要将语言改为中文。

2.问题解决

日期选择组件有两部分国际化问题，一是与日期无关的按钮等元素locale问题，二是与时间相关的locale问题

2.1解决与时间无关的locale问题

官网推荐在入口处使用提供的国际化组件，两种方式可解决该问题，第一种方式已废弃，经验证推荐使用第二种。

1. 方法一：使用LocaleProvider 国际化

<template>
  <a-locale-provider :locale="zhCN">
    <App />
  </a-locale-provider>
</template>
<script>
  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'

  export default {
    data() {
      return {
        zhCN
      };
    },
  };
</script>

使用该方式控制台会输出报错信息:[antdv: LocaleProvider] LocaleProvider is deprecated. Please use locale with ConfigProvider instead
2. 方法二：ConfigProvider 全局化配置

<template>
  <a-config-provider :locale="zhCN">
    <App />
  </a-config-provider>
</template>
<script>
  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'

  export default {
    data() {
      return {
        zhCN
      };
    },
  };
</script>

通过上述方式修改后，可以达到下图效果：

2.2解决与时间相关的locale问题

DatePicker、MonthPicker、RangePicker、WeekPicker 部分 locale 是从 value 中读取，需要正确设置 moment 的 locale

import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

如果该方式依然不生效，检查配置文件中是否忽略了所有语言版，导致未引入

// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

最后的效果图如下：

参考链接

1. DatePicker 日期选择框
2. ConfigProvider 全局化配置
3. LocaleProvider 国际化