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 src="/logo.png"/>
    </template>
  </VueDatePicker>
</template>

<script setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
</script>

clear-icon

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

• Exposed props:

{
  clear: () => void;
}

INFO

• clear - Remove selected value

Code Example

<template>
    <VueDatePicker v-model="date">
        <template #clear-icon="{ clear }">
            <img src="/logo.png" @click="clear" />
        </template>
    </VueDatePicker>
</template>

<script setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
</script>

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 src="/logo.png"/>
    </template>
  </VueDatePicker>
</template>

<script setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
</script>

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 src="/logo.png"/>
    </template>
  </VueDatePicker>
</template>

<script setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
</script>

arrow-right

This slot replaces the arrow right icon on the month/year select row

Code Example

<template>
  <VueDatePicker v-model="date" vertical>
    <template #arrow-right>
      <img src="/logo.png"/>
    </template>
  </VueDatePicker>
</template>

<script setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
</script>

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" vertical>
    <template #arrow-up>
      <img src="/logo.png"/>
    </template>
  </VueDatePicker>
</template>

<script setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
</script>

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 src="/logo.png"/>
    </template>
  </VueDatePicker>
</template>

<script setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
</script>

calendar-icon

This slot replaces the back to calendar icon

Code Example

<template>
  <VueDatePicker v-model="date">
    <template #calendar-icon>
      <img src="/logo.png"/>
    </template>
  </VueDatePicker>
</template>

<script setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
</script>

tp-inline-arrow-up

This slot replaces the arrow-up icon in the timeConfig.timePickerInline

Code Example

<template>
  <VueDatePicker v-model="date" :time-config="{ timePickerInline: true }">
    <template #tp-inline-arrow-up>
      <span class="arrow-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 { VueDatePicker } from '@vuepic/vue-datepicker'}
  import { ref } from 'vue';

  const date = ref();
</script>

<style>
  .arrow-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 timeConfig.timePickerInline

Code Example

<template>
  <VueDatePicker v-model="date" :time-config="{ timePickerInline: true }">
    <template #tp-inline-arrow-down>
      <span class="arrow-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 { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
</script>

<style>
  .arrow-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>