Custom theme datepicker element-ui in vue

Question

I have website with user can choice date_range, so i use datepicker element-ui. But datepicker default theme, how i can change that in vue.

score 1 · Accepted Answer · answered Nov 12 '19 at 09:00

1

At present, Element-UI doesn't provide the function of highly customized theme, only simple customized size and color.

However, you can customize the style with the following configuration:

popper-class - custom class name for DatePicker's dropdown

picker-options - You can set custom class name by creating a picker-options object with cellClassName property.

You can override the default style with a custom class.

Example:

// template
<el-date-picker v-model="value1"
                type="date"
                popper-class="custom-date-picker"
                placeholder="Pick a day">
</el-date-picker>

// css
.custom-date-picker{
  .el-date-picker__header{
    // custom header style here
  }
}

answered Nov 12 '19 at 09:00

sugars

1,473
7
17

i try it, but not work.

.custom-datepicker { .el-picker-panel__body-wrapper{ .el-picker-panel__body{ background-color: #54657e; color: #eceff4; } } } – user8489678 Nov 12 '19 at 22:22
i try it, but not work. `

` `.custom-datepicker { .el-picker-panel__body-wrapper{ .el-picker-panel__body{ background-color: #54657e; color: #eceff4; } } }` – user8489678 Nov 12 '19 at 22:28
@user8489678 Do you use sass or less? – sugars Nov 13 '19 at 00:20
I use scss in my style – user8489678 Nov 13 '19 at 04:39
Try `.custom-datepicker { /deep/ .el-picker-panel__body-wrapper{ .el-picker-panel__body{ background-color: #54657e; color: #eceff4; } } }` – sugars Nov 13 '19 at 05:04
I use sass goe mu style – user8489678 Nov 19 '19 at 04:33

score 0 · Answer 2 · answered Feb 11 '22 at 19:17

0

this working for me, Element Plus with Vue 3!
In App.vue

<style lang="scss">
 .el-date-editor {
   --el-date-editor-width: 40% !important;
 }
</style>

answered Feb 11 '22 at 19:17

john

29
1
3

Suleyman Nurmuhammedow · Answer 3 · 2022-05-25T16:57:58.877

0

You need to just add style inside the tag like

<el-date-picker  v-model="value1"
            type="date"
            popper-class="custom-date-picker"
            placeholder="Pick a day"
       -->  style="width: 100%" />

edited May 25 '22 at 16:57

answered May 25 '22 at 16:57

Suleyman Nurmuhammedow

1
2

Using inline CSS (`style` attribute) is considered [a bad practice](https://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css). – xonya May 25 '22 at 20:00

Custom theme datepicker element-ui in vue

3 Answers3