elementui中el-data-picker自定义样式

本文介绍当tl-date-picker的type属性等于date,month,year,以及daterange时的样式调整,如果为其它类型自行更改

关键:如果想要在组件中修改el-date-picker的样式,需要在el-date-picker标签中写入:append-to-body="false",
以确保将其挂载该组件上而不是body上

一: 当type为date、month或者year时,在html标签中写入popper-class=“sift-data”,代码如下

html部分

 <div class="sift-main">
   <el-date-picker 
      :append-to-body="false" 
      popper-class="sift-data" 
      v-model="value1" 
      :type="type" 
      placeholder="选择日期" 
      range-separator="至" 
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
 </div>

scss部分

<style lang="scss" scoped>
.sift-main {
//年、月、日的日历面板样式
    ::v-deep.sift-data {
      background: rgb(49, 49, 126);
      //日历面板头部区域的样式
      .el-date-picker__header {
        background: unset;
      }
      // 头部lanble的样式,如(2024年3月)
      .el-date-picker__header-label {
        color: #fff;
      }
      // 切换日历的按钮样式
      .el-picker-panel__icon-btn {
        color: #fff;
      }
      // 周一二三四五的样式
      .el-date-table th {
        color: #fff;
      }
      /* 切换到年时 */
      //除头部的日历模块区域样式  当type=date点击label的年或者月时的样式
      .el-year-table,
      .el-month-table {
        background: unset;
        //头部显示范围内的年的模块的样式
        .available {
          background: unset;
          // 里面的文字的样式
          a {
            color: #1890ff;
          }
        }
        //今年
        .today {
          a {
            color: #fff;
          }
        } //选中的年
        .current {
          background: unset;
          border-radius: unset;
          a {
            color: yellow;
          }
        }
      }
      /* 当type=date点击label 日 的样式 */
      // 非本月的区域样式
      .prev-month,
      .next-month {
        background: unset;
        color: #913636;
      }
      //当月的显示区域样式
      .available {
        // background: blue;
        color: #1890ff;
      }
      .current {
        // color: green;
        // background: yellow;
        div {
          span {
            background: yellow;
            color: #000;
          }
        }
      }
      .today {
        div {
          span {
            color: pink;
          }
        }
      }
    }
    }
</style>

二:当type为typerange时

html部分同上

scss部分(样式均写在最外层,备注上提示不生效的部分样式不生效,找到方法再接解决)

<style lang="scss" scoped>
   //输入框的样式
::v-deep .el-input__inner {
  background-color: transparent !important;
  border-color: #80ffff;
  box-shadow: 1px 1px 5px 1px RGB(128, 255, 255, 0.8) inset;
  height: 30px;
  color: #fff;
  .el-range-separator {
    color: #fff;
    line-height: 20px;
  }
  // .el-range-input {
  //   background: transparent;
  //   color: red;
  // }
}
//输入框中选中的开始时间和结束时间的的背景以及选中的时间段样式
::v-deep .el-range-input {
  background: transparent;
  color: #fff !important;
}
/* 设置 el-date-picker 的 start-placeholder 样式 不生效*/
::v-deep.el-date-editor.el-input__inner::placeholder {
  color: red !important; /* placeholder 文字颜色 */
  font-style: italic; /* placeholder 斜体 */
}
// el-range-separator的样式  如:"至"、"~"等等
::v-deep.el-range-separator {
  color: #fff;
}
// 日历图标的位置
::v-deep .el-input__icon {
  display: none;
}
//日历面板背景颜色
::v-deep .el-date-range-picker {
  background: rgb(49, 49, 126);
  color: #fff;
  //顶部年月的样式
  .el-date-range-picker__header {
    color: red;
    //切换年月的箭头样式
    .el-picker-panel__icon-btn {
      color: #9aabcd;
    }
  }
  //周一二三四五的样式
  .el-date-table th {
    color: yellow; /* 文字颜色 */
    // font-weight: bold; /* 字体粗细 */
    // background-color: #f0f0f0; /* 背景颜色 */
    // text-align: center; /* 文字居中 */
  }
  //在选中范围内的日期样式
  .el-date-table td.in-range div {
    background: #5d7dac;
    color: pink;
  }
  //整个日历面板不在选中范围内的日期样式
  .el-date-table td {
    background: unset; //背景
    // color: #fff; //字体颜色
  }
  //被选中的日期那个块的样式
  .el-date-table td.start-date,
  .el-date-table td.end-date {
    // background: yellow;
    //选中的那个圆范围区域块样式
    div {
      background: green;
      //选中的圆圈的样式
      span {
        background: yellow;
        color: red;
      }
    }
  }
}
//日历面板的小箭头
::v-deep .popper__arrow::after {
  border-bottom-color: #fff;
}
//输入框中展位符的样式   不生效
::v-deep.el-input__inner::placeholder {
  color: yellow; /* placeholder 文字颜色 */
}
</style>

如果不生效的部分有生效的方法,请在评论区留言!