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

效果图

实现代码：

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

封装组件

<template>
 <el-date-picker
   :value="value"
   @input="timeChanged"
   type="daterange"
   align="right"
   value-format="yyyy-MM-dd "
   unlink-panels
   @change="$emit('change')"
   range-separator="至"
   start-placeholder="开始日期"
   end-placeholder="结束日期"
   :picker-options="pickerOptions"
 ></el-date-picker>
</template>
<script>
export default {
 props: {
   value: {
     type: Array,
     default: function () {
       return []
     }
   }
 },
 data() {
   return {
     pickerOptions: {
       // 添加这部分代码
       cellClassName(Date) {  // 这个是根据周几，返回class样式
         if (Date.getDay() === 0 || Date.getDay() === 6) {
           return 'c-red'
         }
       }
     }
   }
 },
 methods: {
   timeChanged: function (e) { // 通过input调用这个事件
     this.$emit('input', e)
   }
 }
}
</script>

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

引用组件

<template>
   <redDatePicker v-model="times"></redDatePicker>
</template>

<script>
import redDatePicker from '@/components/red-date-picker/red-date-picker'
export default {
   components: {redDatePicker},
   data() {
   	return {
             times: [] //  查询时间段
       }
   },
   watch: { // 监听值
   	times(val, oldVal) {
     	if (!val || val.length === 0) {
       	this.startCreateTime = undefined
       	this.endCreateTime = undefined
    	 } else {
      		this.startCreateTime = val[0]
       	this.endCreateTime = val[1]
     	}
   }
 },
}
</script>

【引用组件时传递的v-model，会被转换为:value="value" @input="timeChanged"】