無法更改 vuejs-datepicker 的寬度和高度

Question

我查看了這個vuejs-datepicker以將 datepicker 添加到我的項目中。

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

從“vue-date-picker”導入日期選擇器；

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

但是startDate的寬度仍然顯示238px ，這是 datepicker 的默認寬度。

Answer 1

嘗試這個

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

 .startDate {
    width: 150px;
     }

Answer 2

首先從樣式部分中刪除范圍。 並通過檢查datepicker 元素獲取類名。

在這里，在我的例子中，startDate 的類名是.datetime-picker input[data-v-a46a390c]

現在，像這樣申請 css：

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

Answer 3

我必須從我的組件中刪除范圍，然后我才能使用它來更改所選日期的背景顏色。

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

所以像這樣你可以覆蓋 vuejs-datepicker 的任何 styles。 如下所示：

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