el-date-picker样式优化及截止到时不显示分秒优化

截止到时不显示分秒其实比较简单

就HTML部分添加

format="yyyy-MM-dd HH"
value-format="yyyy-MM-dd HH:mm:ss"

然后在css部分将样式隐藏

.el-time-spinner__wrapper {
    width: 100% !important;
  }
  .el-scrollbar:nth-of-type(2) {
    display: none !important;
  }

el-date-picker样式优化涉及样式较多，代码如下

1、HTML代码

 <el-date-picker
                  v-model="value1"
                  type="datetime"
                  placeholder="数据时间"
                  style="width: 180px"
                  format="yyyy-MM-dd HH"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  popper-class="pickerWrapZ1"
                  key="pickerWrap1"
                >
</el-date-picker>

2、css代码

.pickerWrapZ1 {
  background: #02425dff;
  border: 1px solid #16698d;
  color: #fff;
  .el-time-panel {
    background: #02425dff;
    border: 1px solid #16698d;
    color: #fff;
  }
  .el-time-spinner__item {
    color: #fff;
  }
  .el-time-spinner__item:hover:not(.disabled):not(.active) {
    color: #3bc9cbff;
    background: none;
  }
  .el-time-spinner__item.active:not(.disabled) {
    color: #3bc9cbff;
  }
  .el-time-panel__content::after,
  .el-time-panel__content::before {
    border-top: 1px solid #16698d;
    border-bottom: 1px solid #16698d;
  }
  .el-time-panel__btn.confirm {
    color: #3bc9cbff;
  }
  .el-time-panel__btn {
    color: #ccc;
  }
  .el-time-panel__footer {
    border-top: 1px solid #16698d;
  }
  .popper__arrow::after {
    border-bottom-color: #02425dff !important;
  }
  .popper__arrow {
    border-bottom-color: #16698d !important;
  }
  .el-picker-panel__footer {
    background: #02425dff;
  }
  .el-input__inner {
    color: #fff !important;
    background: #02425dff !important;
    border: 1px solid #16698d !important;
  }
  .el-picker-panel__footer {
    border-top: 1px solid #16698d;
  }
  .el-date-table th {
    color: #fff;
    border-bottom: 1px solid #16698d;
  }
  .el-date-picker__header-label {
    color: #fff;
  }
  .el-date-picker__time-header {
    border-bottom: 1px solid #16698d;
  }
  .el-button.is-plain {
    background-color: #3bc9cbff;
    border: 1px solid #16698d;
    color: #fff;
  }
  .el-button.is-plain:focus,
  .el-button.is-plain:hover {
    background-color: #3bc9cbff;
    border: 1px solid #16698d;
    color: #fff;
  }
  .el-date-table td.current:not(.disabled) span {
    background-color: #3bc9cbff;
    color: #fff;
  }
  .el-date-table td.today span {
    color: #3bc9cbff;
  }
  .el-button--text {
    color: #3bc9cbff;
  }
  .el-date-table td.available:hover {
    color: #3bc9cbff;
  }
  .el-date-picker__header--bordered {
    border-bottom: 1px solid #16698d;
  }
  .el-month-table td.current:not(.disabled) .cell,
  .el-year-table td.current:not(.disabled) .cell {
    color: #fff;
    background-color: #3bc9cbff;
    border-radius: 5px;
  }
  .el-month-table td .cell:hover,
  .el-year-table td .cell:hover {
    color: #3bc9cbff;
  }
  .el-month-table td .cell,
  .el-year-table td .cell {
    color: #f5f5f5;
  }
  .el-month-table td.today .cell,
  .el-year-table td.today .cell {
    color: #3bc9cbff;
  }
   .el-time-spinner__wrapper {
    width: 100% !important;
  }
  .el-scrollbar:nth-of-type(2) {
    display: none !important;
  }
}

3、样式展示