el-date-picker去掉today的高亮
时间: 2023-07-24 09:01:11 浏览: 46
要去掉el-date-picker中的today日期的高亮,你可以使用自定义的日期样式来覆盖默认样式。
首先,你可以通过设置el-date-picker的属性`picker-options`来传递自定义的选项。在这个选项中,你可以使用`cell-class`属性来指定日期单元格的类名。
在你的组件中,可以像这样设置el-date-picker的picker-options:
```html
<el-date-picker
v-model="date"
:picker-options="pickerOptions"
></el-date-picker>
```
然后在你的Vue实例中,定义pickerOptions对象,并为cell-class属性设置一个方法,该方法根据日期是否为今天来返回对应的类名。对于今天的日期,你可以返回一个空字符串,这样就不会有高亮效果。
```javascript
data() {
return {
date: '', // 选中的日期
pickerOptions: {
cellClass: this.setCellClass
}
}
},
methods: {
setCellClass({row, column, type}) {
if (type === 'today') {
return ''; // 返回空字符串,去掉高亮样式
}
return null; // 返回null或其他类名,保持默认样式
}
}
```
通过上述设置,你可以去掉el-date-picker中today日期的高亮效果。记得根据你的实际需求调整代码,希望对你有所帮助!如果还有其他问题,请随时提问。
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)