Slots
Below is a list of available slots which you can use to change some default elements of the datepicker
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" position="left">
<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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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>
<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-right: 5px;
}
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21