element ui的日期选择器el-date-picker具体某天改变样式

element ui的日期选择器el-date-picker具体某天改变样式

1.使用el-date-picker的picker-options的cellClassName来自定义日期单元格的样式

代码如下：

<template>
    <div class="">
        <div>
            <el-date-picker v-model="selectedDate" type="daterange" :picker-options="pickerOptions"></el-date-picker>
        </div>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            selectedDate: "", // 选中的日期
            pickerOptions: {
                // 使用cellClassName来自定义日期单元格的样式
                cellClassName: this.setCellClassName,
            },
        };
    },
    methods: {
        // 设置日期单元格的样式函数
        setCellClassName(date) {
            // 这里可以根据日期的具体条件返回不同的类名，实现不同日期底色的效果
            if (this.getDate(date) === '2023-07-28') {
                return "custom-date-cell-class"; // 返回自定义的CSS类名
            }
            return ""; // 返回空字符串表示使用默认样式
        },
        getDate(date) {
            let newDate = new Date(date)
            let year = newDate.getFullYear()
            let month = newDate.getMonth()+1
            let day = newDate.getDate()
            return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day)
        }
    },
};
</script>
  
<style>
.custom-date-cell-class {
    background-color: #ffcc80;
    /* 自定义的底色样式 */
    color: #333;
    /* 可选：修改日期单元格文本颜色 */
}
</style>