el-date-picker 英文改中文_el-date-picker 转中文-CSDN博客

本文链接：https://blog.csdn.net/xuelang532777032/article/details/121287203

在 Vue3 项目中，博主遇到一个问题：尽管引入了 element-plus 并设置了中文配置，但日期选择器仍然显示英文。解决方法包括在 main.js 文件中全局注册 ElConfigProvider，并在组件中使用 <el-config-provider> 将 el-date-picker 包裹，同时在 data 中引入 zhCn 语言包。通过这些步骤，成功将日期控件的界面语言切换为中文。

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

问题描述：

博文为博主原创

没有vip的小伙伴点这里下载本文el-date-picker英文改中文.doc-Web开发文档类资源-CSDN下载https://blog.csdn.net/xuelang532777032/article/det更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/xuelang532777032/44154571

博主vue3 ，碰到一个问题，

虽然引入了element-plus（这里其实跟版本没关系），也配置了中文，如下

element.js

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'

export default (app) => {
  app.use(ElementPlus, { locale:locale })
}

但是日期控件一样给你英文的年月份

解决办法

这里博主用的全局配置，

1、main.js

import { ElConfigProvider } from 'element-plus'
app.component(ElConfigProvider,[ElConfigProvider.name]) //全局组件绑定 button
//如果报错 ts会报错，就用这个写法 app.component("ElConfigProvider",ElConfigProvider)

如图

2、mixin.js(其实你可以在用到el-date-picker组件的那个vue页面直接import，和放data)

import zhCn from'element-plus/lib/locale/lang/zh-cn'
data() {
		return {
			zhCn
		}
	}

3用<el-config-provider :locale="zhCn"> 把el-date-picker包起来

<el-config-provider :locale="zhCn">
			<el-date-picker
			v-model="dateVal"
			type="daterange"
			:picker-options="pageParams1.pickerOptions"
			range-separator="至"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			align="right"
			format="YYYY-MM-DD"
			value-format="YYYY-MM-DD"
			>
			</el-date-picker>
		</el-config-provider>

这样刷新就可以了，

博文为博主原创