CODEWITHSUNDEEP
cssvue.jsdatepickervuejs-datepicker
Izaskun DA
Izaskun DA

Reputation: 39

vuejs-datepicker change styles doesn't work

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

Upvotes: 2

Views: 10682

Answers (4)

Hasibul Alam Rahi
Hasibul Alam Rahi

Reputation: 312

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

Upvotes: 2

RonV
RonV

Reputation: 13

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.

Upvotes: 0

Dileep Reddy
Dileep Reddy

Reputation: 93

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.

Upvotes: 0

MEZIDI Hamza
MEZIDI Hamza

Reputation: 661

Try /deep/ to change css property from parent :

/deep/ .className { Css property }

Upvotes: 0

Related Questions