el-date-picker 时间组件修改默认图标
时间: 2023-07-25 18:48:39 浏览: 117
【JavaScript源代码】vue el-date-picker动态限制时间范围案例详解.docx
您可以使用 `el-date-picker` 组件的 `picker-options` 属性来修改日历小图标的样式。具体实现方法如下:
1. 在 `picker-options` 对象中添加 `iconClass` 属性,将其值设置为空字符串,例如:`iconClass: ''`。
2. 在 CSS 样式表中定义 `.el-date-editor .el-icon-date` 类的样式,将其 `background-image` 属性设置为您想要的图标的 URL。
以下是一个示例代码:
```html
<template>
<el-date-picker
v-model="date"
type="datetime"
:picker-options="{ iconClass: '' }"
></el-date-picker>
</template>
<style>
.el-date-editor .el-icon-date {
background-image: url('path/to/your/image.png');
}
</style>
```
注意:如果您使用的是 CDN 引入的 `element-ui`,则需要将 CSS 样式表中的 `.el-date-editor .el-icon-date` 类定义写在 `style` 标签内,并添加 `!important` 属性,以覆盖默认样式。例如:
```html
<template>
<el-date-picker
v-model="date"
type="datetime"
:picker-options="{ iconClass: '' }"
></el-date-picker>
</template>
<style>
.el-date-editor .el-icon-date {
background-image: url('path/to/your/image.png') !important;
}
</style>
```
阅读全文