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

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

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
Last Updated: 8/30/2021, 1:36:31 PM