效果图
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
