element ui 修改el-date-picker样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui 修改el-date-picker样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<el-date-picker
                  v-if="currentCircle === 'MONTH'"
                  style="margin-right: 20px;"
                  @change="getTypeTotal"
                  v-model="currentDate"
                  value-format="yyyy-MM"
                  format="yyyy-MM"
                  type="month"
                  placeholder=""
                  class="jlpMySelect"
                  popper-class="jlpMySelectPopper"
                ></el-date-picker>



/* 日期 */
// .jlpMySelect 选择框的样式  .jlpMySelectPopper下拉出来的样式

.jlpMySelect {
  border: 1px solid #05658c !important;
  background-color: #042237 !important;
  height: 45px !important;
  width: 120px;
  border-radius: 4px;
}
.jlpMySelectPopper.el-picker-panel {
  background: #00122a !important;
}
.jlpMySelect .el-input__inner {
  font-size: 24px !important;
  text-align: center;
  background: rgba(80, 136, 151, 0.1) !important;
  border: transparent !important;
  color: #ffffff;
  cursor: pointer;
  height: 47px !important;
  line-height: 100% !important;
}
.jlpMySelectPopper .el-date-table {
  font-size: 30px !important;
}
.jlpMySelectPopper .el-date-range-picker__header div {
  font-size: 30px !important;
}
.jlpMySelectPopper .el-date-picker__header-label,
.jlpMySelectPopper .el-picker-panel__icon-btn,
.jlpMySelectPopper .el-date-table th {
  color: #fff !important;
  font-size: 30px !important;
}
.jlpMySelectPopper .el-input__inner {
  background-color: transparent;
}
.jlpMySelectPopper .el-input--small {
  font-size: 30px !important;
}
.jlpMySelectPopper .el-time-panel {
  background-color: #012649;
}
.jlpMySelectPopper .el-time-spinner__item {
  font-size: 26px;
}
.jlpMySelectPopper .el-time-spinner__item:hover,
.jlpMySelectPopper .el-time-spinner__item:hover:not(.disabled):not(.active) {
  background-color: #78bcff;
}
.jlpMySelectPopper .el-time-panel__footer .cancel {
  font-size: 26px;
  color: #409eff;
}
.jlpMySelectPopper .el-time-panel__footer .confirm {
  font-size: 26px;
}
.jlpMySelectPopper .el-month-table {
  font-size: 26px;
}
.jlpMySelectPopper.el-date-picker {
  width: 450px !important;
}
.jlpMySelectPopper.el-date-picker .el-picker-panel__content {
  width: 420px !important;
}
.jlpMySelectPopper .el-year-table td .cell {
  width: 80px;
  font-size: 30px;
}
.jlpMySelectPopper .el-month-table td .cell {
  width: 80px;
}
.el-date-table td {
  height: 45px !important;
}
.el-date-table td span {
  width: 45px !important;
  height: 45px !important;
  line-height: 45px !important;
}
.el-button--mini {
  font-size: 28px !important;
}
.el-picker-panel__icon-btn:hover {
  color: #78bcff !important;
}
.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: #567ebc !important;
}
.el-picker-panel__footer {
  background: #00122a;
}
.el-picker-panel__footer .el-button {
  background: #00122a;
}
.el-picker-panel__footer .el-button:hover {
  background-color: #567ebc !important;
}
.jlpMySelect .el-input__icon {
  line-height: 50px;
}

首先查看官方文档，是否提供了类自定义的参数，其他组件也是如此

element ui 修改el-date-picker样式

<el-form-item label="日期范围">
                <el-date-picker
                  v-model="historyChangeTime"
                  @change="historyTimeChange"
                  popper-class="popperClass1" // popperClass1为自定义的类名
                  type="datetimerange"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>

<style lang="css" scoped>
/deep/ div {}
div >>> div 
<style>

<style lang="css">
.popperClass1 { // 需要注意的是一定不要写在scoped中会导致样式无法生效
  width: 900px;
}
.popperClass1 .el-date-range-picker__header button,
.popperClass1 .el-date-range-picker__header div,
.popperClass1 tr {
  font-size: 22px;
}
.popperClass1{ // 下拉框背景色
    border: 1px solid #3062ff;
    background-color: #00122a;
}
.mySelectPopper .el-date-picker table { //字体
  font-size: 20px;
}
.mySelectPopper .el-input__inner,
.mySelectPopper .el-picker-panel__footer,
.mySelectPopper .el-button,
.mySelectPopper .el-button.is-plain:hover { // 确定按钮色
  background-color: #00122a !important;
}
.mySelectPopper .el-time-spinner__item:hover:not(.disabled):not(.active) { //二级下拉框
  background: rgba(80, 136, 151, 0.1) !important;
  font-size: 18px;
}
<style>

第二种效果图：
element ui 修改el-date-picker样式