Slots
Below is a list of available slots which you can use to change some default elements of the datepicker
Content
Customize parts in the datepicker menu
calendar-header
Replace the content in the calendar header cells
Available props are:
day
: Displayed value in the header cellindex
: Column index it is rendered by
Code Example
<template>
<Datepicker v-model="date">
<template #calendar-header="{ index, day }">
<div :class="index === 5 || index === 6 ? 'red-color' : ''">
{{ day }}
</div>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style>
.red-color {
color: red;
}
</style>
day
This slot allows you to place custom content in the calendar
This slot will also provide 2 props when used
day
: This is the day number displayed in the calendardate
: This is the date value from that day
Code Example
<template>
<Datepicker v-model="date">
<template #day="{ day, date }">
<temlplate v-if="day === tomorrow">
<img class="slot-icon" src="/logo.png"/>
</temlplate>
<template v-else>
{{ day }}
</template>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
const tomorrow = ref(new Date().getDate() + 1);
return {
date,
tomorrow,
}
}
}
</script>
<style>
.slot-icon {
height: 20px;
width: auto;
}
</style>
action-select
This slot replaces the select and cancel button section in the action row
Code Example
<template>
<Datepicker v-model="date" ref="dp">
<template #action-select>
<p class="custom-select" @click="selectDate">Select</p>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
const dp = ref();
const selectDate = () => {
ref.value.selectDate();
}
return {
date,
dp,
selectDate,
}
}
}
</script>
<style>
.custom-select {
cursor: pointer;
color: var(--c-text-accent);
margin: 0;
display: inline-block;
}
</style>
action-preview
This slot replaces the date preview section in the action row
This slot will provide one prop
value
: Current selection in the picker, this can beDate
object, or in case of range,Date
array
Code Example
<template>
<Datepicker v-model="date" ref="dp">
<template #action-preview="{ value }">
{{ getDate(value) }}
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
const dp = ref();
const getDate = (dateVal) => {
const newDate = new Date(dateVal);
return `Selected ${newDate.getDate()}`;
}
return {
date,
dp,
getDate,
}
}
}
</script>
now-button
This slot replaces the content in the now button wrapper
TIP
To use this slot, make sure that showNowButton prop is enabled
One prop is available:
selectCurrentDate
- Function to call to select the date
Code Example
<template>
<Datepicker v-model="date" showNowButton>
<template #now-button="{ selectCurrentDate }">
<span @click="selectCurrentDate()" title="Select current date">
<img class="slot-icon" src="/logo.png" />
</span>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
<style>
.slot-icon {
height: 20px;
width: auto;
cursor: pointer;
}
</style>
am-pm-button
This slot replaces the am-pm button in the time picker when the is24
prop is set to false
Two props are available:
toggle
- Function to call to switch AM/PMvalue
- Currently active mode, AM or PM
Code Example
<template>
<Datepicker v-model="date" showNowButton>
<template #am-pm-button="{ toggle, value }">
<button @click="toggle">{{ value }}</button>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
Trigger and input
Use custom input or trigger element
trigger
This slot replaces the input element with your custom element
This is some custom clickable text that will open datepicker
Code Example
<template>
<Datepicker v-model="date">
<template #trigger>
<p class="clickable-text">This is some custom clickable text that will open the datepicker</p>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style>
.clickable-text {
color: #1976d2;
cursor: pointer;
}
</style>
dp-input
This slot replaces the input field. The difference from the trigger slot
is that you will have access to the input field properties
Available props are:
TIP
For functions to work correctly, make sure that the textInput prop is enabled
When calling onInput
function, make sure to pass the input event
as argument
value
: Value displayed in the input field- type:
string
- type:
onInput
: Function called on the@input
event- type:
(event: Event) => void
- type:
onEnter
: Function called on the@keydown.enter
event- type:
() => void
- type:
onTab
: Function called on the@keydown.tab
event- type:
() => void
- type:
onClear
: Function to call if you want to clear date- type:
() => void
- type:
Code Example
<template>
<Datepicker v-model="date">
<template #dp-input="{ value, onInput, onEnter, onTab, onClear }">
<input type="text" :value="value" />
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
Icons
Change datepicker icons
input-icon
This slot replaces the calendar icon in the input element with your custom element

Code Example
<template>
<Datepicker v-model="date">
<template #input-icon>
<img class="input-slot-image" src="/logo.png"/>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style>
.input-slot-image {
height: 20px;
width: auto;
margin-left: 5px;
}
</style>
clear-icon
This slot replaces the clear icon in the input element with your custom element
Code Example
<template>
<Datepicker v-model="date">
<template #clear-icon="{ clear }">
<img class="input-slot-image" src="/logo.png" @click="clear" />
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style>
.input-slot-image {
height: 20px;
width: auto;
margin-right: 5px;
}
</style>
clock-icon
This slot replaces the default clock icon used to select the time
Code Example
<template>
<Datepicker v-model="date">
<template #clock-icon>
<img class="slot-icon" src="/logo.png"/>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style>
.slot-icon {
height: 20px;
width: auto;
}
</style>
arrow-left
This slot replaces the arrow left icon on the month/year select row
Code Example
<template>
<Datepicker v-model="date">
<template #arrow-left>
<img class="slot-icon" src="/logo.png"/>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style>
.slot-icon {
height: 20px;
width: auto;
}
</style>
arrow-right
This slot replaces the arrow right icon on the month/year select row
Code Example
<template>
<Datepicker v-model="date">
<template #arrow-right>
<img class="slot-icon" src="/logo.png"/>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style>
.slot-icon {
height: 20px;
width: auto;
}
</style>
arrow-up
This slot replaces the arrow up icon in the time picker
Code Example
<template>
<Datepicker v-model="date">
<template #arrow-up>
<img class="slot-icon" src="/logo.png"/>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style>
.slot-icon {
height: 20px;
width: auto;
margin: 0 auto;
}
</style>
arrow-down
This slot replaces the arrow down icon in the time picker
Code Example
<template>
<Datepicker v-model="date">
<template #arrow-down>
<img class="slot-icon" src="/logo.png"/>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style>
.slot-icon {
height: 20px;
width: auto;
margin: 0 auto;
}
</style>
calendar-icon
This slot replaces the back to calendar icon
Code Example
<template>
<Datepicker v-model="date">
<template #calendar-icon>
<img class="slot-icon" src="/logo.png"/>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style>
.slot-icon {
height: 20px;
width: auto;
}
</style>
Overlay
Customize overlay and overlay triggers
time-picker-overlay
This slot replaces the full overlay in the timepicker
Several props are available:
range
: Value passed from general propshours
: Selected hours valueminutes
: Selected minutes valueseconds
: Selected seconds valuesetHours
: Function to call to set hours,(hours: number | number[]) => void
setMinutes
: Function to call to set minutes,(minutes: number | number[]) => void
setSeconds
: Function to call to set seconds,(seconds: number | number[]) => void
If you are using range mode, make sure to pass number arrays in functions
Code Example
<template>
<Datepicker v-model="date">
<template #time-picker-overlay="{ hours, minutes, setHours, setMinutes }">
<div class="time-picker-overlay">
<select class="select-input" :value="hours" @change="setHours(+$event.target.value)">
<option v-for="h in hoursArray" :key="h.value" :value="h.value">{{ h.text }}</option>
</select>
<select class="select-input" :value="minutes" @change="setMinutes(+$event.target.value)">
<option v-for="m in minutesArray" :key="m.value" :value="m.value">{{ m.text }}</option>
</select>
</div>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
const hoursArray = computed(() => {
const arr = [];
for (let i = 0; i < 24; i++) {
arr.push({ text: i < 10 ? `0${i}` : i, value: i });
}
return arr;
});
const minutesArray = computed(() => {
const arr = [];
for (let i = 0; i < 60; i++) {
arr.push({ text: i < 10 ? `0${i}` : i, value: i });
}
return arr;
});
return {
date,
hoursArray,
minutesArray,
}
}
}
</script>
<style>
.time-picker-overlay {
display: flex;
height: 100%;
flex-direction: column;
}
</style>
hours
This slot replaces the hours text between the arrows in the time picker
2 props are available
text
: Value displayed in the datepicker by defaultvalue
: Actual value used in the code
Code Example
<template>
<Datepicker v-model="date">
<template #hours="{ text, value }">
{{ value }}
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
minutes
This slot replaces the minutes text between the arrows in the time picker
2 props are available
text
: Value displayed in the datepicker by defaultvalue
: Actual value used in the code
Code Example
<template>
<Datepicker v-model="date">
<template #minutes="{ text, value }">
{{ value }}
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
hours-overlay
This slot replaces the text in the hours overlay
2 props are available
text
: Value displayed in the datepicker by defaultvalue
: Actual value used in the code
Code Example
<template>
<Datepicker v-model="date">
<template #hours-overlay="{ text, value }">
{{ value }}
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
minutes-overlay
This slot replaces the text in the minutes overlay
2 props are available
text
: Value displayed in the datepicker by defaultvalue
: Actual value used in the code
Code Example
<template>
<Datepicker v-model="date">
<template #minutes-overlay="{ text, value }">
{{ value }}
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
month
This slot replaces the text in the month picker
2 props are available
text
: Value displayed in the datepicker by defaultvalue
: Actual value used in the code
Code Example
<template>
<Datepicker v-model="date">
<template #month="{ text, value }">
{{ value }}
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
year
This slot replaces the text in the year picker
One props is available
year
: Displayed year
Code Example
<template>
<Datepicker v-model="date">
<template #year="{ year }">
{{ year }}
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
month-overlay
This slot replaces the text in the month picker overlay
2 props are available
text
: Value displayed in the datepicker by defaultvalue
: Actual value used in the code
Code Example
<template>
<Datepicker v-model="date">
<template #month-overlay="{ text, value }">
{{ value }}
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
year-overlay
This slot replaces the text in the month picker overlay
2 props are available, although for the year, text and value are the same
text
: Value displayed in the datepicker by defaultvalue
: Actual value used in the code
Code Example
<template>
<Datepicker v-model="date">
<template #year-overlay="{ text, value }">
{{ value }}
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>