ant-design-vue DatePicker（a-range-picker）组件显示中文

最新推荐文章于 2025-05-16 17:19:45 发布

心若向阳(*￣︶￣)

最新推荐文章于 2025-05-16 17:19:45 发布

阅读量8.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：知识累积个人项目 ant-design vue 文章标签： vue.js less 前端

本文链接：https://blog.csdn.net/agua001/article/details/115691288

个人项目同时被 3 个专栏收录

144 篇文章

订阅专栏

知识累积

129 篇文章

订阅专栏

ant-design vue

58 篇文章

订阅专栏

本文介绍了如何将Ant Design Vue组件库的显示语言设置为中文，通过在APP.vue中引入locale并配置，然后重新运行项目实现界面语言切换。尽管官方文档使用的是a-locale-provider组件，但实际使用a-config-provider也能达到相同效果，内部实际上是引用了locale-provider。最后，文章祝贺中国女足战胜韩国晋级东京奥运会。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、默认是英文
a-month-picker

<a-col :span="12">
  <a-form-item label="始报年月">
    <a-month-picker
      v-decorator="['bgfrym']"
      style="width: 100%"
      placeholder="选择始报年月"
    />
  </a-form-item>
</a-col>

显示：
在这里插入图片描述
a-range-picker

<a-col :lg="8" :sm="24" >
  <a-form-item
    label="创建时间"
    :labelCol="{span: 5}"
  >
    <a-range-picker
      style="width: 100%;"
      :show-time="{ format: 'HH:mm' }"
      format="YYYY-MM-DD HH:mm"
      :placeholder="['开始时间', '结束时间']"
      @ok="timeOk"
      v-decorator="['time']"
      >
      <a-icon slot="suffixIcon" type="calendar" />
    </a-range-picker>
  </a-form-item>
</a-col>

显示：
在这里插入图片描述
2、转成中文：官网文档：https://www.antdv.com/components/locale-provider-cn/

在APP.vue中
<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view />
    </div>
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN'   // 在node_modules中找到（可切换各种语言）
export default {
  name: "App",
  data() {
    return {
      locale: zhCN
    };
  },
};
</script>

3、重新运行项目: npm run dev
效果：
在这里插入图片描述

4、细心的小伙伴会发现：官方文档是用a-locale-provider组件包裹的，我这儿却用a-config-provider组件，两张图带你们去解开谜团：

找到config-provider文件夹，打开，看到index.js文件，其实里面引入进来的也是locale-provider
在这里插入图片描述