element-plus 日历组件 Calendar设置每周第一天为周一-非国际化版
在 element 2.10.1+ 的版本中,有first-day-of-week属性,可选值为1 到 7,默认值为1。即日历面板每周从周一开始。
在 element-plus 中,日历组件默认从周日开始,且没有first-day-of-week属性来自由定义周起始日。在国际化小节,官网给了如下说明:
由于 Element Plus 的默认语言为英语,如果你需要设置其它的语言,请参考国际化文档。
要注意的是:日期相关的文字(月份,每一周的第一天等等)也都是通过国际化来配置的。
解:
步骤一:设置语言为 简体中文(zh-cn)- 如配置,直接看步骤二
官网提供了两种全局配置国际化的方式,选择任一即可
// 方式一:main.ts 文件
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus, {
locale: zhCn,
})
// 方式二:App.vue
<template>
<el-config-provider :locale="zhCn">
<app />
</el-config-provider>
</template>
<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
</script>
步骤二:日期和时间本地化
// 在使用日历的vue页面配置
import 'dayjs/locale/zh-cn' // 然而,并未生效,每周第一天仍是周日。
翻阅资料后,解决方案是配置dayjs,最终OK
import { dayjs } from "element-plus";
dayjs.en.weekStart = 1;
The end.