Project scenario:
The design requires that the "little calendar" icons for the start date and end date be changed to the right, and the "x" icon for clearing the input is also displayed on the right after selecting a date.
solution:
For a certain item of the form, you need to enter the start date and end date to submit to the background to filter data, first put the html code:
...
<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>
...
Style modification, the picture given by the ui for the small calendar icon, if you use the icon that comes with the component, you can refer to the debug contentproperty
scss code:
.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;
}
}
}
principle:
When the input box has content, move the mouse to the input box, the "x" icon will be displayed, and add the ::before pseudo-class through .el-icon-circle-closethis class , that is, the "x" icon.<i></i>
<i></i>And the label ::after corresponding to this "x" content:""remains unchanged. If you use the ::after content of this label to locate, it is convenient to switch and display the "small calendar" and "x" in place.
Then when .el-icon-circle-closeappears on <i></i>the top, change the width and height of ::after to 0; when .el-icon-circle-closeit disappears, ::after adopts the defined width and height, and realizes the switch between the "x" and "small calendar" icons.
Supplement:
Step on the pit record: try to bind the id to the component to adjust the style, but found that the id cannot be added in el-date-picker