解决Ant Design Vue 日期选择器中文不生效

就爱瞎逛2026-05-19 8:44

现象

在src/app.vue全局注册了中文：

TypeScript 复制代码

<script setup>
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

dayjs.locale(zhCN.locale);
</script>

在picker.vue里引入<a-date-picker picker="month" placeholder="选择月份">，面板仍然出现英文：

临时解决方案

在a-date-picker增加locale变量

html 复制代码

<a-date-picker picker="month" placeholder="选择月份"
    v-model:value="monthDate" :locale="datePickerLocale" />

TypeScript 复制代码

<script>
import zhCN from 'ant-design-vue/es/date-picker/locale/zh_CN';

const datePickerLocale = {
    ...zhCN,
    lang: {
        ...zhCN.lang,
        monthFormat: 'M月',
        shortMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    },
};

export default {
  data() {
    return { datePickerLocale }
  }

}
<script>

根本原因

这个项目装了两个dayjs：

TypeScript 复制代码

c@xx:~/project/frontend$ npm ls dayjs
frontend@1.0.0 /home/c/project/frontend
├─┬ ant-design-vue@4.2.6
│ └── dayjs@1.11.20
└── dayjs@1.11.19

我回想这个项目的安装顺序，ant-design-vue是因为切换UI库才装的，碰巧项目已经在用dayjs并且yarn.lock已经有dayjs@1.11.19，碰巧装ant-design-vue时dayjs更新到1.11.20，所以装了两个dayjs。而我在app.vue注册中文用的是dayjs@1.11.19，ant-design-vue用dayjs@1.11.20没有注册中文，所以才没生效。

解决办法

在 package.json 加 resolutions：

"resolutions": {

"dayjs": "1.11.20"

}

TypeScript 复制代码

c@xx:~/project/frontend$ npm ls dayjs
frontend@1.0.0 /home/c/frontend
├─┬ ant-design-vue@4.2.6
│ └── dayjs@1.11.20 deduped
└── dayjs@1.11.20