基于elementui的工作日，休息日的日历组件(elementui能做什么)

编辑：rootadmin

基于elementui的工作日，休息日的日历组件基于elementui的工作日，休息日的日历组件功能要求DatePicker 日期选择器国际化周六，周日所在列背景颜色修改添加节假日，工作日代码功能要求

推荐整理分享基于elementui的工作日，休息日的日历组件(elementui能做什么)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:elementui的优缺点,elementui案例,elementui基于vue,elementui能做什么,elementui的优缺点,elementui的优缺点,elementui的优缺点,elementui基于vue,内容如对您有帮助，希望把文章链接给更多的朋友！

在这里插入图片描述，如图要求做一个可以显示休息日和工作日的组件。我基于element-ui已有的组件进行修改。

DatePicker 日期选择器

以”日“为基本单位，基础的日期选择控件。

国际化

使用element-ui的国际化功能将星期一到星期日设置为中文在vue组件里面引入el-date-picker 得到中文配置的容=日期选择器

周六，周日所在列背景颜色修改

打开控制台查看周一到周日的样式然后我们修改组件的样式得到如图效果：

添加节假日，工作日

使用element-ui的自定义功能我们稍加修改此时已经能展示休息日了，在实际开发中，休息日的数组可以由后端返回，以及工作日的数组。

代码<template> <div> <el-date-picker v-model="value1" type="date" placeholder="Pick a day" :size="size" > <template #default="cell"> <div class="cell" :class="{ current: cell.isCurrent }"> <span class="text">{{ cell.text }}</span> <span v-if="isHoliday(cell)" class="holiday">休</span> </div> </template> </el-date-picker> </div></template><script setup lang='ts'>import { ref } from 'vue'// 类型学习const value1 = ref(null)const size = ref<'default' | 'large' | 'small'>('default')const a = ref<string>('inint')console.log(a.value, 'a------')a.value = 'zhangsan'console.log(a.value, 'a------')const holidays = [ '2021-10-01', '2021-10-02', '2021-10-03', '2021-10-04', '2021-10-05', '2021-10-06', '2021-10-07']const isHoliday = ({ dayjs }) => { return holidays.includes(dayjs.format('YYYY-MM-DD'))}</script><style >.el-date-table th:nth-child(n+7){background-color: #c0c0c0}.el-date-table th:nth-child(1){background-color: #c0c0c0}.holiday{ position: absolute; top: -7px; left: 14px;}.el-date-table td:nth-child(n+7){background-color: #c0c0c0}.el-date-table td:nth-child(1){background-color: #c0c0c0}</style>

本文链接地址:https://www.jiuchutong.com/zhishi/279793.html 转载请保留说明！

上一篇：win11系统怎么删除此电脑里的百度网盘图标? 百度网盘的删除方法(win11系统怎么删除账户)

下一篇：aspnet_admin.exe进程是安全的吗 aspnet_admin进程信息查询