当前位置: 首页 > article >正文

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.


http://www.kler.cn/a/327100.html

相关文章:

  • SpringBoot相关漏洞学习资料
  • ROS1安装教程
  • Obfuscator使用心得
  • 关于使用拓扑排序算法实现解析勾稽关系优先级的研究和实现
  • ExcelVBA编程输出ColorIndex与对应颜色色谱
  • Autosar入门_架构(Architecture)
  • MobaXterm基本使用 -- 服务器状态、批量操作、显示/切换中文字体、修复zsh按键失灵
  • 从0学习React(3)
  • C# 解决Excel边框样式无法复制问题及实现格式刷功能
  • 前端DOM常用操作
  • 什么是IIC通信协议?
  • JAVA姓氏头像情侣头像家庭头像签名头像谐音顽埂头像设计小程序头像大全系统小程序源码
  • sentinel2 L2A处理基线04.00 反射率计算方法
  • 【MySQL】视图和触发器
  • 使用代理爬取数据需要筛选合适的ip吗
  • C++11 多线程编程-小白零基础到手撕线程池
  • 【VUE】案例:商场会员管理系统
  • find()和findIndex()方法
  • 微信小程序——音乐播放器
  • 【有啥问啥】二分图(Bipartite Graph)算法原理详解
  • SpringMVC源码-AbstractUrlHandlerMapping处理器映射器将实现Controller接口的方式定义的路径存储进去
  • 健康生活,从日常细节开始
  • NVLM多模态 LLM 在图像和语言任务中的表现优于 GPT-4o
  • Oracle数据恢复—异常断电导致Oracle数据库报错的数据恢复案例
  • 第167天:应急响应-日志自动提取分析项目_ELK_Logkit_LogonTracer_Anolog等
  • Mysql高级篇(下)——日志