Невозможно изменить ширину и высоту vuejs-datepicker

Question

Я посмотрел на этот vuejs-datepicker , чтобы добавить datepicker в мой проект.

<div class="startDate">
    <datepicker
     v-model="startDate"
     format="YYYY-MM-DD"
     name="startDate"
     ></datepicker>
</div>

import datepicker из "vue-date-picker";

<style scoped>
  .startDate {
   width: 150px;
   }
<style>

Но все равно ширина startDate показывает 238px , которая является шириной даты по умолчанию.

Answer 1

попробуйте

<div>
    <datepicker class="startDate"
        v-model="startDate"
        :readonly="true"
        format="YYYY-MM-DD"
        name="startDate"
     ></datepicker>
</div>

 .startDate {
    width: 150px;
     }

Answer 2

Проблема решена

Прежде всего удалите область действия из части style .И получить имя класса путем проверки элемента datepicker.

Здесь, в моем случае, имя класса для startDate равно . Выбор времени ввода данных [data-v-a46a390c]

Теперь примените к CSSкак это:

.datetime-picker input[data-v-a46a390c] {
  width: 150px;
  height: 38px;
}