Javascript 无法更改vuejs日期选择器的宽度和高度

我对此进行了研究，以便将datepicker添加到我的项目中

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

从“vue日期选择器”导入日期选择器

开始日期{
宽度：150px；
}

但是startDate的宽度仍然显示238px，这是日期选择器的默认宽度。

试试这个

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

---

首先，从样式部分删除范围。并通过检查日期选择器元素来获取类名

这里，在我的例子中，startDate的类名是.datetime选择器 输入[data-v-a46a390c]

现在，像这样应用于css：

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

---

我必须从我的组件中删除作用域，然后才能使用它来更改所选日期的背景色

    .cell.day.selected{
      background: green !important;
    }

这样，您就可以覆盖vuejs日期选择器的任何样式。如下图所示：

`.cell.day.selected {
background: $blue !important;
}
.cell.day-header,
.day__month_btn.up {
font-weight: bold !important;
}
.vdp-datepicker input[type="text"]:read-only {
 width: 200px;
 cursor: pointer;
}`

---

尝试设置vuejs datepicker组件输入的样式时，请尝试使用输入类属性：

---

我已经试过了。它也不起作用。我认为vuejs-datepicker.add可能有问题！重要的是，我已经找到了解决方案并张贴在上面。检查一下！！！也谢谢你的帮助！！！

    .cell.day.selected{
      background: green !important;
    }

`.cell.day.selected {
background: $blue !important;
}
.cell.day-header,
.day__month_btn.up {
font-weight: bold !important;
}
.vdp-datepicker input[type="text"]:read-only {
 width: 200px;
 cursor: pointer;
}`