效果圖

image

實(shí)現(xiàn)代碼：

使用picker-options 新增的cellClassName 【設(shè)置日期的 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="結(jié)束日期"
     :picker-options="pickerOptions"  
  ></el-date-picker>
  
</template>
 
<script>
  
export default {
  data() {
    return {
      pickerOptions: { // 添加這部分代碼
        cellClassName(Date) {
          console.log(Date) // 打印組件當(dāng)前顯示所有的時(shí)間
          if (Date.getDay() === 0 || Date.getDay() === 6) {
            console.log(Date.getDay()) // 返回日期中表示周幾的數(shù)值（0 表示周日，6 表示周六）
            return 'c-red'
          }
        }
      }
    }
  }
}

</script>

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

注意：style標(biāo)簽上不能帶scoped 否則顯示不會(huì)生效

擴(kuò)展：cellClassName 的類型是一個(gè)Function(Date)，參數(shù)Date是一個(gè)日期對象，所以它具有以下方法

JavaScript 高級程序設(shè)計(jì)第四版 第5章 基本引用類型的Date

image