Overlay

Customize overlay and overlay triggers

time-picker-overlay

This slot replaces the full overlay in the timepicker

Several props are available:

• range: Value passed from general props
• hours: Selected hours value
• minutes: Selected minutes value
• seconds: Selected seconds value
• setHours: Function to call to set hours, (hours: number | number[]) => void
• setMinutes: Function to call to set minutes, (minutes: number | number[]) => void
• setSeconds: Function to call to set seconds, (seconds: number | number[]) => void

Info

If you are using range mode, make sure to pass number arrays in functions

Code Example

<template>
    <VueDatePicker v-model="date">
      <template #time-picker-overlay="{ hours, minutes, setHours, setMinutes }">
        <div class="time-picker-overlay">
          <select class="select-input" :value="hours" @change="setHours(+$event.target.value)">
            <option v-for="h in hoursArray" :key="h.value" :value="h.value">{{ h.text }}</option>
          </select>
          <select class="select-input" :value="minutes" @change="setMinutes(+$event.target.value)">
            <option v-for="m in minutesArray" :key="m.value" :value="m.value">{{ m.text }}</option>
          </select>
        </div>
      </template>
    </VueDatePicker>
</template>

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

const date = ref(new Date());

const hoursArray = computed(() => {
  const arr = [];
  for (let i = 0; i < 24; i++) {
    arr.push({ text: i < 10 ? `0${i}` : i, value: i });
  }
  return arr;
});

const minutesArray = computed(() => {
  const arr = [];
  for (let i = 0; i < 60; i++) {
    arr.push({ text: i < 10 ? `0${i}` : i, value: i });
  }
  return arr;
});
</script>

<style>
.time-picker-overlay {
  display: flex;
  height: 100%;
  flex-direction: column;
}
</style>

hours

This slot replaces the hours text between the arrows in the time picker

2 props are available

• text: Value displayed in the datepicker by default
• value: Actual value used in the code

Code Example

<template>
    <VueDatePicker v-model="date">
      <template #hours="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

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

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

minutes

This slot replaces the minutes text between the arrows in the time picker

2 props are available

• text: Value displayed in the datepicker by default
• value: Actual value used in the code

Code Example

<template>
    <VueDatePicker v-model="date">
      <template #minutes="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

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

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

hours-overlay-value

This slot replaces the text in the hours overlay

2 props are available

• text: Value displayed in the datepicker by default
• value: Actual value used in the code

Code Example

<template>
    <VueDatePicker v-model="date">
      <template #hours-overlay="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

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

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

minutes-overlay-value

This slot replaces the text in the minutes overlay

2 props are available

• text: Value displayed in the datepicker by default
• value: Actual value used in the code

Code Example

<template>
    <VueDatePicker v-model="date">
      <template #minutes-overlay="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

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

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

month

This slot replaces the text in the month picker

2 props are available

• text: Value displayed in the datepicker by default
• value: Actual value used in the code

Code Example

<template>
    <VueDatePicker v-model="date">
      <template #month="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

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

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

year

This slot replaces the text in the year picker

One props is available

• value: Displayed year

Code Example

<template>
    <VueDatePicker v-model="date">
      <template #year="{ value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

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

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

month-overlay-value

This slot replaces the text in the month picker overlay

2 props are available

• text: Value displayed in the datepicker by default
• value: Actual value used in the code

Code Example

<template>
    <VueDatePicker v-model="date">
      <template #month-overlay-value="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

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

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

year-overlay-value

This slot replaces the text in the month picker overlay

2 props are available, although for the year, text and value are the same

• text: Value displayed in the datepicker by default
• value: Actual value used in the code

Code Example

<template>
    <VueDatePicker v-model="date">
      <template #year-overlay-value="{ text, value }">
        {{ value }}
      </template>
    </VueDatePicker>
</template>

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

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

month-overlay

Replace the content in month overlay

This slot exposes the following:

• month (number)
  • Selected month value
• year (number)
  • Selected year value
• items ( { text: string; value: number }[])
  • Generated array of months
• updateMonthYear ((month: number, year: number) => void)
  • Exposed function to update month and year
• instance (number)
  • In case of multi-calendars, instance is the order of the calendar
• toggle (() => void)
  • Toggle overlay

Code Example

<template>
    <VueDatePicker v-model="date">
      <template 
          #month-overlay="{
              month,
              year,
              items,
              updateMonthYear,
              toggle
           }">
            <div>
              <select 
                  class="select-input"
                  :value="month" 
                  @change="updateMonth($event, updateMonthYear, year, toggle)">
                <option v-for="m in items" :key="m.value" :value="m.value">{{ m.text }}</option>
              </select>
            </div>
            <button @click="toggle">Close</button>
      </template>
    </VueDatePicker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const date = ref(new Date());

type UpdateMonthYear = (month: number, year: number) => void;

const updateMonth = (
    event: InputEvent,
    updateMonthYear: UpdateMonthYear,
    year: number,
    toggle: () => void) => {
      updateMonthYear(+(event.target as HTMLSelectElement).value, year);
      toggle();
};
</script>

year-overlay

Replace the content in year overlay

This slot exposes the following:

• month (number)
  • Selected month value
• year (number)
  • Selected year value
• items ( { text: string; value: number }[])
  • Generated array of years
• updateMonthYear ((month: number, year: number) => void)
  • Exposed function to update month and year
• instance (number)
  • In case of multi-calendars, instance is the order of the calendar
• toggle (() => void)
  • Toggle overlay

Code Example

<template>
    <VueDatePicker v-model="date">
      <template 
          #year-overlay="{
              month,
              year,
              items,
              updateMonthYear,
              toggle
           }">
            <div>
              <select
                  class="select-input"
                  :value="year"
                  @change="updateYear($event, updateMonthYear, month, toggle)"
              >
                <option v-for="y in items" :key="y.value" :value="y.value">{{ y.text }}</option>
              </select>
            </div>
            <button @click="toggle">Close</button>
      </template>
    </VueDatePicker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const date = ref(new Date());

type UpdateMonthYear = (month: number, year: number) => void;

const updateYear = (
    event: InputEvent,
    updateMonthYear: UpdateMonthYear,
    month: number,
    toggle: () => void) => {
      updateMonthYear(month, +(event.target as HTMLSelectElement).value);
      toggle();
};
</script>

month-overlay-header

Add a custom content in the overlay header

Exposed function:

• toggle (() => void)

Code Example

<template>
    <VueDatePicker v-model="date">
      <template #month-overlay-header="{ toggle }">
            <div class="overlay-header">
                <span @click="toggle" class="pointer">
                    {{ '< Go back' }}
                </span>
            </div>
      </template>
    </VueDatePicker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

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

<style>
.overlay-header {
  text-align: center;
}
.pointer {
  cursor: pointer;
}
</style>

year-overlay-header

Add a custom content in the overlay header

Exposed function:

• toggle (() => void)

Code Example

<template>
    <VueDatePicker v-model="date">
      <template #year-overlay-header="{ toggle }">
            <div class="overlay-header">
                <span @click="toggle" class="pointer">
                    {{ '< Go back' }}
                </span>
            </div>
      </template>
    </VueDatePicker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

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

<style>
.overlay-header {
  text-align: center;
}
.pointer {
  cursor: pointer;
}
</style>

hours-overlay-header

Add a custom content in the overlay header

Exposed function:

• toggle (() => void)

Code Example

<template>
    <VueDatePicker v-model="date">
      <template #hours-overlay-header="{ toggle }">
            <div class="overlay-header">
                <span>Hours</span>
            </div>
      </template>
    </VueDatePicker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

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

<style>
  .overlay-header {
    text-align: center;
    cursor: pointer;
  }
</style>

minutes-overlay-header

Add a custom content in the overlay header

Exposed function:

• toggle (() => void)

Code Example

<template>
    <VueDatePicker v-model="date">
      <template #year-overlay-header="{ toggle }">
        <div class="overlay-header">
          <span>Minutes</span>
        </div>
      </template>
    </VueDatePicker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

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

<style>
  .overlay-header {
    text-align: center;
    cursor: pointer;
  }
</style>

seconds-overlay-header

Add a custom content in the overlay header

Exposed function:

• toggle (() => void)

Code Example

<template>
    <VueDatePicker v-model="date" enable-seconds>
      <template #year-overlay-header="{ toggle }">
        <div class="overlay-header">
          <span>Seconds</span>
        </div>
      </template>
    </VueDatePicker>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

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

<style>
.overlay-header {
  text-align: center;
  cursor: pointer;
}
</style>