无法更改 vuejs-datepicker 的宽度和高度

Question

我研究了这个 vuejs-datepicker 以将日期选择器添加到我的项目中。

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

import datepicker from "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 部分删除 scoped。并通过检查日期选择器元素获得classname。

Here, in my case classname for startDate is .datetime-picker input[data-v-a46a390c]

现在，像这样申请 css：

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

Answer 3

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

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

所以像这样你可以覆盖vuejs-datepicker的任何样式。如下所示：

`.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;
}`

Answer 4

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

<datepicker input-class="focus:outline-none"></datepicker>

无法更改 vuejs-datepicker 的宽度和高度

Unable to change width and height of vuejs-datepicker

javascript

vue.js

vue-component

vuejs2

vuejs-datepicker