I looked into this vuejs-datepicker to add datepicker to my project.
<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>
But still width of startDate shows 238px which is default width of datepicker.
try this
<div>
<datepicker class="startDate"
v-model="startDate"
:readonly="true"
format="YYYY-MM-DD"
name="startDate"
></datepicker>
</div>
.startDate {
width: 150px;
}
First of all remove scoped from style portion. And obtain classname by inspecting datepicker element.
Here, in my case classname for startDate is .datetime-picker input[data-v-a46a390c]
Now, apply to css like this:
.datetime-picker input[data-v-a46a390c] {
width: 150px;
height: 38px;
}
I had to remove scoped from my component and then I was able to use this to change background color of selected date.
.cell.day.selected{
background: green !important;
}
So like this you can override any styles of vuejs-datepicker. like below:
`.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;
}`
when trying to style the input of a vuejs-datepicker component, try using the input-class attribute:
<datepicker input-class="focus:outline-none"></datepicker>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.