Icons
Change datepicker icons
input-icon
This slot replaces the calendar icon in the input element with your custom element
Code Example
vue
<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
vue
<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
vue
<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
vue
<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
vue
<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
vue
<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
vue
<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
vue
<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>
tp-inline-arrow-up
This slot replaces the arrow-up icon in the time-picker-inline
Code Example
vue
<template>
<VueDatePicker v-model="date" time-picker-inline>
<template #tp-inline-arrow-up>
<span class="my-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
/>
</svg>
</span>
</template>
</VueDatePicker>
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script>
<style>
.my-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
tp-inline-arrow-down
This slot replaces the arrow-down icon in the time-picker-inline
Code Example
vue
<template>
<VueDatePicker v-model="date" time-picker-inline>
<template #tp-inline-arrow-down>
<span class="my-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
/>
</svg>
</span>
</template>
</VueDatePicker>
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script>
<style>
.my-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>