基于elementui的工作日，休息日的日历组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了基于elementui的工作日，休息日的日历组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

功能要求

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

DatePicker 日期选择器

以”日“为基本单位，基础的日期选择控件。
基于elementui的工作日，休息日的日历组件

国际化

使用element-ui的国际化功能将星期一到星期日设置为中文
基于elementui的工作日，休息日的日历组件
在vue组件里面引入el-date-picker

得到中文配置的容=日期选择器

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

打开控制台查看周一到周日的样式
基于elementui的工作日，休息日的日历组件

然后我们修改组件的样式

得到如图效果：

添加节假日，工作日

使用element-ui的自定义功能
基于elementui的工作日，休息日的日历组件
我们稍加修改

此时已经能展示休息日了，在实际开发中，休息日的数组可以由后端返回，以及工作日的数组。文章来源地址https://www.toymoban.com/news/detail-433492.html

代码

<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>

到了这里，关于基于elementui的工作日，休息日的日历组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！