vuejs-datepicker change styles doesn't work

Question

I'm trying to change the styles of a vuejs-datepicker ( https://www.npmjs.com/package/vuejs-datepicker )

 <datepicker
   format="dd/MM/yyyy"
   calendar-class="my_calendar"
   input-class="textfield"
   name="my_date" />

In the styles section I define this rule, but my datepicker doesn't change the width

.my_calendar {
  width: 100px !important;
}

Any idea? Or other plugin for use a datepicker in vuejs?

Thanks

Answer 1

Try /deep/ to change css property from parent :

/deep/ .className { Css property }

Answer 2

CSS for vuejs datepicker can be passed as a prop. There are 3 props, wrapper-class, input-class and calendar class. For example

<datepicker input-class="rounded w-1/2" calendar-class="rounded"></datepicker> 

Note : Tailwindcss classes used here.

Answer 3

Try adding module style. You want to add styles to calendar-class . So try it this way:

    <datepicker :class="$style.input" inputClass="input" />

    <style module>
      input {
         width: 100%;
         cursor: default;
      }
    </style>

Note: I was facing a similar issue with input class. This worked out for me.