vuejs-datepicker의 너비 및 높이를 변경할 수 없습니다.

vuejs-datepicker의 너비 및 높이를 변경할 수 없습니다.

프로젝트에 데이트 피커를 추가하기 위해 이 vuejs-datepicker를 조사했습니다.

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

"vue-date-picker"에서 날짜 선택기를 Import한다.

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

그러나 startDate의 폭은 여전히 날짜 선택기의 기본 폭인 238px를 나타냅니다.

이거 먹어봐

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

 .startDate {
    width: 150px;
     }

먼저 스타일 부분에서 범위를 제거합니다.그리고 datepicker 요소를 검사하여 클래스 이름을 얻습니다.

여기서 startDate의 클래스명은 .datetime-picker input [data-v-a46a390c]입니다.

이제 다음과 같이 css에 적용합니다.

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

컴포넌트에서 스코프를 삭제한 후 이 스코프를 사용하여 선택한 날짜의 배경색을 변경할 수 있었습니다.

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

vuejs-datepicker 컴포넌트의 입력을 스타일링할 때는 input-class 속성을 사용합니다.

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

언급URL : https://stackoverflow.com/questions/58154893/unable-to-change-width-and-height-of-vuejs-datepicker