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 propshours
: Selected hours valueminutes
: Selected minutes valueseconds
: Selected seconds valuesetHours
: 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 defaultvalue
: 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 defaultvalue
: 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 defaultvalue
: 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 defaultvalue
: 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 defaultvalue
: 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 defaultvalue
: 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 defaultvalue
: 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>