vue修改element-ui日期下拉框datetimePicker的背景色样式

在vue项目中，源datetimePicker的背景样式，往往与项目背景不搭，需要修改。

 文章来源地址https://www.toymoban.com/news/detail-504967.html

1.先在assets里面新建一个index.css文件来存储全局样式

.el-date-picker.has-sidebar.has-time {
    background: #0a5857d6;
    color: #fff;
    border: 1px solid #22f4d6
}
.el-date-picker__header-label {
    color: #ffffff;
}
.el-date-table th {
    color: #fff;
}
.el-icon-d-arrow-left:before {
    color: #fff;
}
.el-icon-arrow-left:before {
    color: #fff;
}
.el-icon-arrow-right:before {
    color: #fff;
}
.el-icon-d-arrow-right:before {
    color: #fff;
}
.el-picker-panel__footer {
    background-color: #0a5857d6;
    border: 1px solid #22f4d6
}
.el-picker-panel [slot=sidebar], .el-picker-panel__sidebar {
    background-color: #0a5857d6;
    border-right: 1px solid #22f4d6;
}
.el-picker-panel__shortcut {
    color: #fff;
}
.el-date-picker__time-header {
    border-bottom: 1px solid #22f4d6;
}
.el-popper[x-placement^=bottom] .popper__arrow::after {
    top: 1px;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: #0a5857d6;
}
.el-popper[x-placement^=top] .popper__arrow::after {
    bottom: 1px;
    margin-left: -6px;
    border-top-color: #22f4d6;
    border-bottom-width: 0;
}
.el-picker-panel {
    background: #0a5857d6;
    color: #fff;
}
.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: #22f4d6c9;
}

2.在main.js里面导入这个css文件最后在里面加入我们想要的样式

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

此时的效果如下图

3.在el-date-picker中设置样式

<el-date-picker
      class="picker"
      align="center"
      popper-class="elDatePicker"
      :clearable="false"
      :unlink-panels="false"
      value-format="yyyy-MM-dd HH:mm:ss"
      v-model="timeValue"               
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']"
      >
    </el-date-picker>

4.设置对应的背景样式

.picker {
      height: 40px;
      background-color: #0f5456;
      ::v-deep .el-range-input {
        background-color:#0f5456;
      }
    }

得到下图效果

到了这里，关于vue修改element-ui日期下拉框datetimePicker的背景色样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！