Html
<div style="min-width: 500px;">
<el-date-picker
popper-class="date_style"
v-model="searchDate[0]"
:clearable="false"
:picker-options="{
disabledDate(date) {
const minDate = new Date(1753, 0, 1);
const maxDate = new Date(9999, 11, 31);
return date < minDate || date > maxDate;
},
}"
value-format="yyyy-MM-dd"
type="date"
/>
<span style="padding:0 10px;">至</span>
<el-date-picker
popper-class="date_style"
v-model="searchDate[1]"
:clearable="false"
:picker-options="{
disabledDate(date) {
const minDate = new Date(1753, 0, 1);
const maxDate = new Date(9999, 11, 31);
return date < minDate || date > maxDate;
},
}"
value-format="yyyy-MM-dd"
type="date"
/>
</div>
Css
//全局时间控件 按钮样式 添加属性popper-class="date_style"
.date_style {
.el-picker-panel__body-wrapper {
.el-picker-panel__body {
.el-date-picker__header {
.el-picker-panel__icon-btn {
margin-top: 5px;
}
.el-icon-d-arrow-left::before {
// border: 1px solid #bbb;
// color: #bbb;
padding: 2px 5px;
font-weight: 700;
font-size: 20px;
border-radius: 5px;
margin-right: 5px;
}
.el-icon-arrow-left:before {
// border: 1px solid #bbb;
// color: #bbb;
border-radius: 5px;
padding: 2px 5px;
font-weight: 700;
font-size: 20px;
}
.el-icon-d-arrow-right:before {
// border: 1px solid #bbb;
// color: #bbb;
margin-left: 5px;
border-radius: 5px;
padding: 2px 5px;
font-weight: 700;
font-size: 20px;
}
.el-icon-arrow-right:before {
// border: 1px solid #bbb;
// color: #bbb;
border-radius: 5px;
padding: 2px 5px;
font-weight: 700;
font-size: 20px;
}
}
}
}
}