功能要求

在这里插入图片描述，如图要求做一个可以显示休息日和工作日的组件。我基于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>