Icons

Change datepicker icons

input-icon

This slot replaces the calendar icon in the input element with your custom element

Code Example

<template>
    <VueDatePicker v-model="date">
        <template #input-icon>
            <img class="input-slot-image" src="/logo.png"/>
        </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new 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>
    <VueDatePicker v-model="date">
        <template #clear-icon="{ clear }">
            <img class="input-slot-image" src="/logo.png" @click="clear" />
        </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new 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>
    <VueDatePicker v-model="date">
        <template #clock-icon>
            <img class="slot-icon" src="/logo.png"/>
        </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new 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>
    <VueDatePicker v-model="date">
        <template #arrow-left>
            <img class="slot-icon" src="/logo.png"/>
        </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new 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>
    <VueDatePicker v-model="date">
        <template #arrow-right>
            <img class="slot-icon" src="/logo.png"/>
        </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

<style>
    .slot-icon {
        height: 20px;
        width: auto;
    }
</style>

arrow-up

This slot replaces the arrow up icon in the time picker or header if vertical mode is enabled

Code Example

<template>
    <VueDatePicker v-model="date">
        <template #arrow-up>
            <img class="slot-icon" src="/logo.png"/>
        </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new 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 or header if vertical mode is enabled

Code Example

<template>
    <VueDatePicker v-model="date">
        <template #arrow-down>
            <img class="slot-icon" src="/logo.png"/>
        </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new 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>
    <VueDatePicker v-model="date">
        <template #calendar-icon>
            <img class="slot-icon" src="/logo.png"/>
        </template>
    </VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

<style>
    .slot-icon {
        height: 20px;
        width: auto;
    }
</style>