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

这篇具有很好参考价值的文章主要介绍了element ui的日期选择器el-date-picker具体某天改变样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

element ui的日期选择器el-date-picker具体某天改变样式
el-date-picker的type为year时无法通过cellclassname定义类名,javascript,前端,elementui,vue
1.使用el-date-picker的picker-options的cellClassName来自定义日期单元格的样式

代码如下：文章来源地址https://www.toymoban.com/news/detail-771799.html

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

到了这里，关于element ui的日期选择器el-date-picker具体某天改变样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！