[英]Unable to change width and height of vuejs-datepicker
我查看了这个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 的默认宽度。
尝试这个
<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 的任何 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;
}`
当尝试设置 vuejs-datepicker 组件的输入样式时,请尝试使用 input-class 属性:
<datepicker input-class="focus:outline-none"></datepicker>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.