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.

Answer 4

I have faced the same problem and the defaualt css does not works when it is scoped.Now,do the following steps to apply styling to Vuejs date picker and time picker

1. use input-class="--your--class--name--here " in the place of class
2. beneath your scoped style tag use another style tag which should not be scoped

`

    <template>
      <div>
       <datepicker
         v-model="startDate"
         input-class ="my-picker-class"
         placeholder="Start Date"
        </datepicker>       
     </div>
   </template>
    <style>
        .my-picker-class{
            border: none !important;
            border-bottom: 1px solid #F26F31 !important;
           }
    </style>

` 3. Here i have used my class name .my-picker-class and applied styling there , dont forget to give that "!important" at the end of the styling