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>