el-date-picker 修改禁用的背景色
时间: 2023-12-22 11:28:44 浏览: 163
更改DateTimePick控件背景色
4星 · 用户满意度95%
根据提供的引用内容,可以通过修改el-date-picker的disabledDate方法来修改禁用的背景色。具体的代码如下所示:
```html
<template>
<el-date-picker
v-model="date"
:picker-options="pickerOptions"
type="date"
placeholder="选择日期">
</el-date-picker>
</template>
<script>
export default {
data() {
return {
date: '',
pickerOptions: {
disabledDate: (time) => {
let disable = time < new Date(new Date().setHours(0, 0, 0, 0))
return disable
},
// 修改禁用的背景色
disabledCell: (time) => {
let disable = time < new Date(new Date().setHours(0, 0, 0, 0))
return disable ? 'background-color: #f5f5f5;' : ''
}
}
}
}
}
</script>
```
在上述代码中,我们通过在pickerOptions中添加disabledCell方法来修改禁用的背景色。如果时间小于当前日期的0点,我们将返回一个自定义的样式`background-color: #f5f5f5;`,这样就可以修改禁用的背景色为灰色。
阅读全文