Slots
Bellow 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 own custom element
This is some custom clickable text that will open date picker
Code
<template>
<Datepicker v-model="date" position="left">
<template #trigger>
<p class="clickable-text">This is some custom clickable text that will open date picker</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>
1
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
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 own custom element

Code
<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>
1
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
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 own custom element

Code
<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>
1
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
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