element-plus vue3 引入中文日历

html

<el-config-provider :locale="zhCn">
    <el-calendar v-model="value" ref="calendar">
    	<template #header="{ date }">
            <el-button-group>
            	<el-button size="small" @click="selectDate('prev-year')"
            	>«</el-button
            	>
            	<el-button size="small" @click="selectDate('prev-month')"
            	>‹</el-button
            	>
            	<span class="time-data">{{ date }}</span>
            	<el-button class="right" size="small" @click="selectDate('next-year')"
            	>»</el-button
            	>
            	<el-button class="right" size="small" @click="selectDate('next-month')"
            	>›</el-button>
            </el-button-group>
        </template>
    </el-calendar>
</el-config-provider>

js

<script setup>
import { ref, onMounted, reactive, toRefs, nextTick } from 'vue';

// 中文日历组件
import { ElConfigProvider } from 'element-plus'
import zhCn from "element-plus/lib/locale/lang/zh-cn";

// 日历默认值和点击事件
const value = ref(new Date())
const calendar = ref()
const selectDate = (val) => {
  calendar.value.selectDate(val)
}
</script>