el-date-picker添加icon
时间: 2023-11-03 21:55:46 浏览: 174
bootstrap-datepicker给特殊日期添加样式
要为el-date-picker添加图标,您可以按照以下步骤进行操作:
1. 首先,将Element UI的日期选择器组件引入到您的代码中:
```html
<el-date-picker class="wp-date-range" v-model="updateDateRange" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
```
2. 接下来,您可以使用CSS隐藏左侧的图标。您可以在样式表(style标签)中添加以下代码:
```css
::v-deep .el-date-editor .el-input__icon:nth-child(1) {
display: none;
}
```
3. 最后,在mounted生命周期函数中添加以下代码:
```javascript
mounted() {
let ElRangeCloseIcon = document.getElementsByClassName('el-range__close-icon')[0];
ElRangeCloseIcon.innerHTML = '<i class="el-icon-time"></i>';
}
```
通过这些步骤,您将成功为el-date-picker添加图标。
阅读全文