To make good looking Vue apps, we need to style our components. To make our lives easier, we can use components with styles built-in.
In this article, we’ll look at how to customize the BootstrapVue date picker.
Dropdown Placement
We can change the drop-down placement with the right , dropup , dropright , dropleft , no-flip and offset props. They change the date picker placement.
no-flip doesn’t move the date picker even if it’s cut off.
offet lets us shift the date picker position.
The rest let us change the direction.
Dark Mode
We can set the dark prop to true to enable dark mode.
For instance, we can write:
<template>
<div id="app">
<b-form-datepicker v-model="value" dark></b-form-datepicker>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: undefined
};
}
};
</script>
to make the date picker’s background black.
Button Only Mode
By default, the date picker is shown when we click on the input box. And the input box is shown by default.
To only show the date picker when we click the calendar icon, we can use the button-only prop. This will also remove the input box.
So, we can write:
<template>
<div id="app">
<b-form-datepicker v-model="value" button-only></b-form-datepicker>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: undefined
};
}
};
</script>
Then only the calendar icon is shown.
And we can click on it to see the date picker.
Date String Format
We can change the date string format of the date picker.
For instance, we can write:
<template>
<div id="app">
<b-form-datepicker
v-model="value"
:date-format-options="{ year: 'numeric', month: 'short', day: '2-digit', weekday: 'short' }"
></b-form-datepicker>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: undefined
};
}
};
</script>
We added the date-format-options prop.
The object we pass in has the year , month , day , and weekday props to set the selected date format.
'numeric' means it’s a number.
'short' means we show the abbreviation.
'2-digit' means we show 2 digits.
Therefore, we should see that the selected date has the full year, abbreviated month and weekday, and the day number.
Full-Width Calendar Dropdown
We can adjust the calendar dropdown width with the calendar-width and the menu-class prop.
For instance, we can write:
<template>
<div id="app">
<b-form-datepicker v-model="value" menu-class="w-100" calendar-width="100%"></b-form-datepicker>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: undefined
};
}
};
</script>
menu-class is 'w-100' , which makes the date picker fills the width of the screen.
calendar-width is '100%' so that the content fills the box.
Internationalization
We can change the locale of the date picker.
For instance, we can write:
<template>
<div id="app">
<b-form-datepicker v-model="value" :locale="locale"></b-form-datepicker>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: undefined,
locale: 'de'
};
}
};
</script>
We have the locale field set to 'de' to set the date picker to the Germany locale.
Now we’ll see the weekdays and months are displayed in German.
We can also add the labels to change the rest of the text.
For instance, we can write:
<template>
<div id="app">
<b-form-datepicker v-model="value" v-bind="labels.de" :locale="locale"></b-form-datepicker>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: undefined,
locale: "de",
labels: {
de: {
labelPrevDecade: "Vorheriges Jahrzehnt",
labelPrevYear: "Vorheriges Jahr",
labelPrevMonth: "Vorheriger Monat",
labelCurrentMonth: "Aktueller Monat",
labelNextMonth: "Nächster Monat",
labelNextYear: "Nächstes Jahr",
labelNextDecade: "Nächstes Jahrzehnt",
labelToday: "Heute",
labelSelected: "Ausgewähltes Datum",
labelNoDateSelected: "Kein Datum gewählt",
labelCalendar: "Kalender",
labelNav: "Kalendernavigation",
labelHelp: "Mit den Pfeiltasten durch den Kalender navigieren"
}
}
};
}
};
</script>
Now the rest of the labels are in German.
This includes all the navigation labels and instructions.
Likewise, we can add the weekday field to change the starting week daty.
weekdays to add labels for weekdays.
showDecadeNav toggles on or off the decade navigation.
hideHeader hide header hides the header if it’s true .
We can set them as follows:
<template>
<div id="app">
<b-form-datepicker
:start-weekday="weekday"
:show-decade-nav="showDecadeNav"
:hide-header="hideHeader"
v-model="value"
v-bind="labels.de"
:locale="locale"
></b-form-datepicker>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: undefined,
locale: "de",
labels: {
de: {
labelPrevDecade: "Vorheriges Jahrzehnt",
labelPrevYear: "Vorheriges Jahr",
labelPrevMonth: "Vorheriger Monat",
labelCurrentMonth: "Aktueller Monat",
labelNextMonth: "Nächster Monat",
labelNextYear: "Nächstes Jahr",
labelNextDecade: "Nächstes Jahrzehnt",
labelToday: "Heute",
labelSelected: "Ausgewähltes Datum",
labelNoDateSelected: "Kein Datum gewählt",
labelCalendar: "Kalender",
labelNav: "Kalendernavigation",
labelHelp: "Mit den Pfeiltasten durch den Kalender navigieren"
}
},
showDecadeNav: false,
hideHeader: false,
weekday: 0,
weekdays: [
{ value: 0, text: "Sunday" },
{ value: 1, text: "Monday" },
{ value: 6, text: "Saturday" }
]
};
}
};
</script>
We added a few props to set them.
Conclusion
There are many customization options with the date picker.
We can change the locales and labels as we wish.
