在vue項目中，源datetimePicker的背景樣式，往往與項目背景不搭，需要修改。

?文章來源地址http://www.zghlxwxcb.cn/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里面導(dǎo)入這個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中設(shè)置樣式

<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="結(jié)束日期"
      :default-time="['00:00:00', '23:59:59']"
      >
    </el-date-picker>

4.設(shè)置對應(yīng)的背景樣式

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

得到下圖效果

?

到了這里，關(guān)于vue修改element-ui日期下拉框datetimePicker的背景色樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！