el-date-picker调试图标

项目场景：

设计要求将起始日期和结束日期的“小日历”图标改到右侧，并且选择日期后，清除输入的“x”图标也在右侧显示。

---

解决方案：

表单某一项，需要输入起始日期和结束日期提交给后台筛选数据，首先放html代码：

...
<el-form-item label="录入日期：" prop="timeRange">
	<el-date-picker
	v-model="searchForm.timeRange"
	class="cus-date"
	type="daterange"
	:clearable="true"
	range-separator="-"
	start-placeholder="开始日期"
	end-placeholder="结束日期"
	:default-time="['00:00:00','23:59:59']"
	></el-date-picker>
</el-form-item>
...

样式修改，日历小图标用的ui给的图，如果用组件自带的图标，可以参考调试content属性
scss代码:

.cus-date{
    
    
	position:relative;
	width:fit-content;
	/*将日期组件自带的小日历图标隐藏*/
	.el-range__icon{
    
    
		display:none;
	}
	/*使用“x”图标位置的after来放日历按钮*/
	.el-range__close-icon{
    
    
		position:absolute;
		right:34px;
		top:10%;
		&&::after{
    
    
			width:19px;
			height:18px;
			background:url('../../assets/pictures/cus_date_icon.png') center/100% 100% no-repeat;
		}
	}
	/*当鼠标移入时，隐藏自定义“小日历”*/
	.el-icon-circle-close{
    
    
		&::after{
    
    
			width:0;
			height:0;
		}
	}
}

原理：

当输入框有内容时，鼠标移到输入框，“x”图标会显示，并通过.el-icon-circle-close这个类给<i></i>添加::before伪类，即“x”图标。

而这个“x”对应的<i></i>标签::after的content:""一直不变，如果使用这个标签的::after内容来定位，方便将“小日历”和“x”原地切换显示。

那么当.el-icon-circle-close 出现在<i></i>上时，将::after的宽高改为0；当.el-icon-circle-close消失时::after采用定义的宽高，就实现“x”和“小日历”图标的来回切换。

---

补充：
踩坑记录：尝试给组件绑定id来调整样式，但是发现，id无法添加在el-date-picker中