效果图:
1.html
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
style="width: 400px;"
v-model="value1"
type="datetime"
placeholder="选择日期时间">
</el-date-picker>
</div>
2.css样式
/* 日期小图标开始 */
/deep/.el-date-editor .el-range-separator {
color: #979797 !important;
width: 8%;
font-size: 20px;
}
/deep/ .el-date-editor .el-range__icon {
position: absolute;
right: 5px;
top: 1px;
color: #c0c4cc;
}
/deep/.el-date-editor--daterange.el-input__inner {
width: 338px;
}
/deep/.el-range-editor--small .el-range-input {
font-size: 12px;
}
/deep/.el-icon-time {
background: url('../../../../assets/pictures/date.png') center no-repeat;
cursor:pointer
}
/deep/.el-icon-time:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
/deep/.el-input__prefix {
width: 0;
left: 92% !important;
}