自定义日历.element-ui 修改时间选择器样式

一、自定义日历

目录

一、自定义日历

二、时间选择样式自定义

---

先上效果图

一、自定义日历组件

已经封装成vue组件，可选择切换年月：

二、时间选择样式自定义

 因 element-UI的时间选择器 el-date-picker 是将元素直接挂载到页面的中，而非自身元素下，所以使用 /deep/、 >>>、 ::v-deep 等穿透无法定位到元素。

解决方案：

利用时间选择器的popper-class属性，设置样式。

有2种方式：

1. 创建style.scss，在该文件里进行样式的编写，再引入
2. 在APP.vue中加入样式的编写（根文件）

        
        

//效果图对应样式



//   日期选择弹窗样式
  .el-picker__popper.el-popper[role="tooltip"] {
    border-color: #24386000;
  }
  .el-popper.is-light .el-popper__arrow::before {
    background: #131e34;
    border: none !important;
  }
  .dark_form {
    background: #131e34 !important;
    border: #131e34;
    .el-date-picker__header--bordered {
      border-bottom: solid 0.01rem #818ea9;
    }
    .el-picker__popper.el-popper[role="tooltip"] .el-popper__arrow::before {
      border: none !important;
    }
    .el-picker-panel__body {
      background: #131e34 !important;
    }
    .el-date-picker__header-label {
      color: #fbfbfb;
      font-family: "HarmonyOS Sans";
    }
    .el-picker-panel__icon-btn {
      color: #fbfbfb;
      font-family: "HarmonyOS Sans";
    }
    .el-month-table td .cell {
      color: #fbfbfb;
      font-family: "HarmonyOS Sans";
    }
	.el-year-table td .cell {
      color: #fbfbfb;
      font-family: "HarmonyOS Sans";
}
  }

搜索

复制