el-date-picker,DateTimePicker⽇期时间选择器样式更改效果如下：
<el-date-picker
v-model="value1"
type="datetimerange"
start-placeholder="开始⽇期"
end-placeholder="结束⽇期"
:default-time="['12:00:00']">
</el-date-picker>
element 的时间范围筛选器组件样式更改
/* ⽇历样式 */
.el-picker-panel {
background: #1b3e6f !important;
color: #ffffff;
border:1px solid #93bee7 !important;
}
.el-picker-panel .el-date-range-picker__time-header {
border-bottom:1px solid #93bee7 !important;
}
.el-picker-panel__icon-btn {
width:8px;
height:10px;
color: #5a81fd !important;
}
.el-picker-panel .el-input__inner {
background-color: #19466f;
border: #75ebf2;
color: #e8fdff;
}
.el-picker-panel .el-date-range-picker__content.is-left,
.el-picker-panel .el-date-range-picker__content.is-right {
border-right:1px solid #93bee7 !important;
background:url(./images/矩形.png) center center;
background-size:100%100%;
}
.el-picker-panel .el-date-range-picker__header {
color: #75ebf2;
}
.el-picker-panel .el-date-table th {
color: #c3e3ec;
}
.el-picker-panel .el-date-table td.available {
width:14px;
height:14px;
font-size:16px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #6ce6cb;
}
.el-picker-panel .el-date-table td.available:hover {
color: #ffffff;
}
.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {  background-color: #4c77b3 !important;
}
.el-time-panel {
background-color: #1b3e6f !important;
border:1px solid #93bee7 !important;
}
.el-time-spinner__item {
color: #c3e3ec !important;
}
.el-time-spinner__item:hover:not(.disabled):not(.active){
background: #4c77b3 !important;
}
.el-time-panel__btn {
color: #adcfff !important;
}
.el-picker-panel__footer {
background-color: #1b3e6f !important;
}
.
el-picker-panel .el-button {
width:36px;
height:18px;
font-size:18px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #1475e3;
}
.el-icon-d-arrow-left {
color: #1475e3!important;
}
.
el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
color: #1475e3!important;
margin-left:-20px !important;
}
.el-button +.el-button {
width:92px;
height:40px;
background:url(./images/圆⾓矩形.png) center center !important;  background-size:115%130%!important;
border:1px solid #1475e3!important;
border-radius:4px !important;
}
.el-button {
width:92px;
height:40px;
border:1px solid #1475e3;
border-radius:4px;
}
.el-button--text {
display: none;
width:92px;
height:40px;
border:1px solid #1475e3;
border-radius:4px;
}
.el-button.is-disabled.is-plain,
.el-button.is-disabled.is-plain:focus,
.el-button.is-disabled.is-plain:hover {
width:92px;
height:40px;
htmlborderbackground:url(./images/圆⾓矩形.png) center center !important;  background-size:115%130%!important;
border:1px solid #1475e3!important;
border-radius:4px !important;
}
.el-button--text,
.el-button--text.is-disabled,
.el-button--text.is-disabled:focus,
.el-button--text.is-disabled:hover,
.el-button--text:active {
display: none !important;
}
.el-date-table th {
border-bottom:1px solid #293f6f !important;
}
/* 时间筛选 */
.el-time-panel__content::after,
.el-time-panel__content::before {
border-bottom:1px solid #293f6f !important;
border-top:1px solid #293f6f !important;
}
.el-time-panel {
background-color: #040d27 !important;
}
.el-time-panel__firm {
background-color: #040d27 !important;
color: #1475e3!important;
}
.el-time-panel__btn.cancel {
background-color: #040d27 !important;  color: #6397d1 !important;
}
.el-time-panel__footer {
border-top: none !important;
}
.el-time-panel {
border: none;
border-top:2px solid #293f6f !important; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。