el-date-picker特定日期颜色标记
时间: 2023-10-04 14:03:30 浏览: 67
date-picker
你可以使用 `cellClassName` 属性来为特定日期添加自定义的类名,然后在 CSS 样式中定义该类名的样式。例如,以下代码将 2021 年 5 月 1 日的日期单元格的背景颜色设置为红色:
```vue
<template>
<el-date-picker
v-model="date"
type="date"
:cell-class-name="setCellClassName"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
date: null
}
},
methods: {
setCellClassName(date) {
if (date.getFullYear() === 2021 && date.getMonth() === 4 && date.getDate() === 1) {
return 'highlight'
}
return ''
}
}
}
</script>
<style>
.highlight {
background-color: red;
}
</style>
```
在上面的代码中,我们在 `setCellClassName` 方法中判断日期是否为 2021 年 5 月 1 日,如果是,则返回 `highlight` 类名,否则返回空字符串。然后在 CSS 样式中定义 `.highlight` 类名的样式,最终实现了标记特定日期的效果。
阅读全文