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>

tp-inline-arrow-up

This slot replaces the arrow-up icon in the time-picker-inline

Code Example

<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

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