Custom theme datepicker element-ui in vue

Issue

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.

Solution

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 By - sugars