elementui el-date-picker时间区间选择弹出框样式

周不凢2025-11-25 6:08

:popper-class="'dialogContainerScreen'"

复制代码

<el-date-picker
          :popper-class="'dialogContainerScreen'"
          v-model="timeRange"
          :type="'datetimerange'"
          :range-separator="'至'"
          :start-placeholder="'开始日期'"
          :end-placeholder="'结束日期'"
          :value-format="'YYYY-MM-DD HH:mm:ss'"
          style="width: 300px"
        />

css样式有冗余自行判断

复制代码

<style lang="scss">
//时间搜索 样式
  .dialogContainerScreen{
    background: #001939;
    color: #fff;
    border: 1px solid #00376b !important;

    //选择时间弹框
    .el-date-range-picker.has-time .el-picker-panel__body-wrapper,
    .el-picker-panel__footer,
    .el-input__wrapper {
      background: #001939 !important;
      color: #fff !important;
      // border-top: 1px solid #02bdd5;
    }
    .el-button.is-text,
    .el-input__inner,
    .el-time-spinner__item,
    .el-date-table th,
    .el-date-range-picker__header-label,
    .el-picker-panel__icon-btn{
      color: #fff;
    }
    .el-date-table td.in-range .el-date-table-cell {
      background: #042f83;
    }
    .el-input--small {
      border-color: #00376b;
    }
    .el-popper.is-light {
      border: 1px solid #00376b !important;
    }
    .el-date-range-picker__time-header,
    .el-date-table th {
      border-bottom: 1px solid #00376b !important;
    }
    .el-picker-panel__footer {
      border-top: 1px solid #00376b !important;
    }
    .el-date-range-picker__content.is-left {
      border-right: 1px solid #00376b !important;
    }
    .el-button,
    .el-time-panel {
      background: #062a4c !important;
      color: #fff;
      border: 1px solid #00376b !important;
    }
    .el-button:hover {
      background: #0b2239 !important;
      color: #02bdd5 !important;
      border: 1px solid #00376b !important;
    }
    .el-input__wrapper {
      box-shadow: #00376b 0px 0px 0px 1px inset;
      background: #062a4c;
    }
    .el-time-spinner__item.is-active:not(.is-disabled) {
      color: #00e4ff;
    }
    .el-input__wrapper:hover {
      background: #0b2239 !important;
      color: #02bdd5 !important;
    }
  }

</style>