element DatePicker 日期选择器 周六周日日期标红

效果图

image

实现代码：

使用picker-options 新增的cellClassName 【设置日期的 className】

<template>

 <el-date-picker
     v-model="times"
     format="yyyy-MM-dd"
     value-format="yyyy-MM-dd"
     type="daterange"
     range-separator="至"
     start-placeholder="开始日期"
     end-placeholder="结束日期"
     :picker-options="pickerOptions"  
  ></el-date-picker>
  
</template>
 
<script>
  
export default {
  data() {
    return {
      pickerOptions: { // 添加这部分代码
        cellClassName(Date) {
          console.log(Date) // 打印组件当前显示所有的时间
          if (Date.getDay() === 0 || Date.getDay() === 6) {
            console.log(Date.getDay()) // 返回日期中表示周几的数值（0 表示周日，6 表示周六）
            return 'c-red'
          }
        }
      }
    }
  }
}

</script>

<style lang='scss'>
.c-red span {
  color: #f00;
}
</style>

注意：style标签上不能带scoped 否则显示不会生效

扩展：cellClassName 的类型是一个Function(Date)，参数Date是一个日期对象，所以它具有以下方法

JavaScript 高级程序设计第四版 第5章 基本引用类型的Date

image