2025年踩坑日志

1. ANTDV的日历组件国际化问题

在使用antd的vue版本进行开发时，日历组件默认使用的是en-US，如果要使用其他语言，官方的方法是在main.js里全局设置locale

import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

<a-calendar v-model:value="value" @panelChange="onPanelChange" @select="onSelect"></a-calendar>

开发文档：https://www.antdv.com/components/calendar-cn#api

但是这个方法实际上是不生效的，所以需要换种方式。

如果不想安装momentjs的话最好是使用以下方式：

// main.js
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

// 组件内html
<a-config-provider :locale="zhCN">
    <a-calendar v-model:value="value">
    </a-calendar>
</a-config-provider>

// js
import zhCN from "ant-design-vue/es/locale/zh_CN.js";

这种方式是最简单最方便的生效方式。

config-provider组件可以在非全局范围内设置日历的语言配置，也可以将它放到APP.vue文件里进行全局配置，看个人喜好。

但是main.js那个全局处理是必须的。