日期选择器el-date-picker的样式修改

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<style lang="less">   .el-picker-panel {     background: #0f0472a9 !important;     color: #ffffff;     border: 1px solid #93bee7 !important;     line-height: 20px;   }   .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: #cbd3f0 !important; } .el-picker-panel .el-input__inner {   background-color: #19466f;   border: #75ebf2;   color: #e8fdff; } .el-date-picker__header-label {   color: #6ce6cb !important; } .el-date-picker__header-label:hover {   color: #ffffff; } .el-date-table td.disabled div {   background-color: #6891cfa8 !important; } .el-picker-panel .el-date-table th {   color: #c3e3ec; } .el-picker-panel .el-date-table td.available {   font-size: 16px;   font-weight: bold;   color: #6ce6cb; } .el-picker-panel .el-date-table td.available:hover {   color: #ffffff; }

　　部分样式在scope下无法生效，所以单独写了一个script

效果：

 

 参考链接：https://blog.csdn.net/weixin_43131046/article/details/119248963?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-1-119248963.pc_agg_new_rank&utm_term=.el-picker-panel__footer&spm=1000.2123.3001.4430