cant custom input date picker style (remove border)

[blackinitial]

i want to custom input date picker style to material style, remove border and padding, but not work. i styled with class .form-control .reportrange-text on css but not change,

.form-control.reportrange-text {
  border: 0 !important;
  padding: 0 !important;
  margin-bottom: 0.5rem !important;

  .input {
    padding: 0.5rem 0 0.25rem;
    font-weight: bold;
  }
}

maybe this scoped issue date picker...

[nkostadinov]

You can use the input slot to customize it how you want:

https://innologica.github.io/vue2-daterange-picker/#slots

[blackinitial]

@nkostadinov No, I can't customize slot, i was used. .reportrange-text can't replace with slot, the class on parent from slot.

DateRangePicker(
  ref="picker"
  opens="right"
  :locale-data="{ firstDay: 1, format: 'DD-MM-YYYY HH:mm:ss' }"
  :minDate="datePicker.minDate" :maxDate="datePicker.maxDate"
  autoApply
  :ranges="false"
  v-model="filter.dateRange"
)
  .input__date-picker(slot="input" slot-scope="picker")
    label From Date - Until Date
    .input {{ picker.startDate | moment('YYYY MM DD') }} - {{ picker.endDate | moment('YYYY MM DD') }}

in console like this, slot on child of .reportrange-text class

[karakum]

Same problem! My workaround(hack):

        mounted() {
            window.jQuery('.form-control.reportrange-text')
                .removeClass('form-control reportrange-text')
                .addClass('range-click');
        },

so it is dirty ;) It would be nice if class ''.form-control.reportrange-text'' will be configurable, or just absent.

[nkostadinov]

The problem here is that the classes you try to override are outside the slot and the css is scoped. If you want to override the scoped CSS you can do it like this e.g. :

<style lang="scss" scoped>
    .vue-daterange-picker ::v-deep .reportrange-text {
        border: none;
    }
</style>

The v-deep keyword will make the css apply over the scoped style of the component.

[blackinitial]

Ok, solved. I use v-deep /deep/ on front of the class