element-plus 设置日历从周一开始

zq.xc

已于 2023-01-09 09:22:55 修改

阅读量1.8k

点赞数 2

分类专栏： element-ui 文章标签： vue.js elementui

于 2023-01-07 17:00:36 首次发布

本文链接：https://blog.csdn.net/zq1988626/article/details/128592579

版权

element-ui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

element-plus 使用日期工具库 dayjs，处理日期本地化问题，并导出了 dayjs 对象，node 环境下直接引入 dayjs 本地化包即可，但在浏览环境下需要手动处理

注意，浏览器环境下一定要使用 element-plus 导出的 dayjs 对象

node 环境下

import 'dayjs/locale/zh-cn'

浏览器环境下

requirejs

requirejs 配置

{
	base:"/",
    paths:{
        "vue":"lib/vue/dist/vue.global",
        "css":"lib/require-plugins/css"
    ],
	shims:[
		"element-plus/dist/index":{
			deps:[
			    'css!element-plus/theme-chalk/dark/css-vars',
			    'css!element-plus/dist/index',
			]
		}
		"dayjs/locale/zh-cn":{
			deps:['dayjs']
		}
	],
	packages:[
		{
			name:"dayjs",
			location:'lib/dayjs'),
			main:'dayjs.min'
		},
		{
			name: "element-plus",
			location:'lib/element-plus',
			main: "dist/index.full"
		},
	]
}

function setDayjsLocale(name='zh-cn'){
	return new Promise((resolve,reject)=>{
		requirejs([
			'dayjs/locale/'+name,
			'element-plus'
		],(zhCn,ElementPlus)=>{
			ElementPlus.dayjs.locale(zhCn, null,true)
			ElementPlus.dayjs.locale(name)
			resolve();
		},reject)
	})
}

使用

setDayjsLocale()

无加载器

完整演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-plus@2/dist/index.css">
	</head>
	<body>
		<div id="app">
			<h1>Element Plus 配置 dayjs 演示</h1>
			<el-date-picker v-model="date"></el-date-picker>
		</div>
		<script src="https://unpkg.com/vue@3"></script>
		<script src="https://unpkg.com/element-plus@2"></script>
		<script src="https://unpkg.com/element-plus@2/dist/locale/zh-cn.min.js"></script>
		<script src="https://unpkg.com/dayjs@1"></script>
		<script src="https://unpkg.com/dayjs@1/locale/zh-cn.js"></script>
		<script>
			const init = (win)=>{
				const {
					ElementPlusLocaleZhCn,
					dayjs_locale_zh_cn,
					ElementPlus,
					Vue
				} = win;
				const {createApp,reactive} = Vue;
				
				ElementPlus.dayjs.locale(window.dayjs_locale_zh_cn, null,true);
				ElementPlus.dayjs.locale('zh-cn');
				createApp({
					setup(){
						return reactive({
							date:''
						})
					}
				})
				.use(ElementPlus,{
					locale:ElementPlusLocaleZhCn
				})
				.mount(document.getElementById('app'))
			}
			
			init(window)
		</script>
	</body>
</html>

zq.xc

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
element-plus 设置日历从周一开始

element-plus 使用日期工具库dayjs，处理日期本地化问题，并导出了dayjs对象，node环境下直接引入dayjs本地化包即可，但在浏览环境下需要手动处理注意:浏览器环境下一定要使用 element-plus 导出的 dayjs 对象
复制链接

扫一扫