把antd的日历插件的日期换成中文

最新推荐文章于 2024-07-01 11:44:19 发布

浩星

最新推荐文章于 2024-07-01 11:44:19 发布

阅读量4.9k

点赞数 2

分类专栏： vue-antd 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_41619796/article/details/104795405

版权

vue-antd 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何解决AntD日历插件的中文化显示问题，通过引入中文插件和正确配置locale属性，实现日历插件的中文显示，并提供代码示例。

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

前言：

在网上百度搜索日历插件，经常就被导到日期插件那里去了，而且，antd的日历插件 calendar 也有英文和中文的问题，这里说一下解决办法。

效果：

前面是刚引入的效果图，后面是处理后的效果图

步骤：

1、引入中文插件

 import 'moment/locale/zh-cn';

2、data定义变量，然后页面组件中引用

data部分：
locale: {
          lang: {
            month: '月',
            year: '年',
          },
        },

组件源码展示：

<template>
    <div class="calendarDiv">
      <a-calendar :fullscreen="false" @panelChange="onPanelChange" :locale="locale"/>
    </div>
</template>

<script>

  import 'moment/locale/zh-cn';
  export default {
    props: [],
    watch: {},
    data() {
      return {
        name: '',//日历插件
        locale: {
          lang: {
            month: '月',
            year: '年',
          },
        },
      };
    },
    created() {
    },
    mounted() {
    },
    methods: {
      /*
      *   日历选中值发生改变的事件
      * */
      onPanelChange(value, mode) {
        console.log(value, mode);
      },
    },
    component: {},
    beforeDestroy() {
    }

  };
</script>

<style lang='less' scoped>
    .calendarDiv{
      width: 300px;
      border: 1px solid #d9d9d9;
      borderRadius: 4px;
    }

</style>