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