Content
Customize parts in the datepicker menu
calendar-header
Replace the content in the calendar header cells
Available props are:
day
: Displayed value in the header cellindex
: Column index it is rendered by
Code Example
<template>
<VueDatePicker v-model="date">
<template #calendar-header="{ index, day }">
<div :class="index === 5 || index === 6 ? 'red-color' : ''">
{{ day }}
</div>
</template>
</VueDatePicker>
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script>
<style>
.red-color {
color: red;
}
</style>
day
This slot allows you to place custom content in the calendar
This slot will also provide 2 props when used
day
: This is the day number displayed in the calendardate
: This is the date value from that day
Code Example
<template>
<VueDatePicker v-model="date">
<template #day="{ day, date }">
<template v-if="day === tomorrow">
<img class="slot-icon" src="/logo.png"/>
</template>
<template v-else>
{{ day }}
</template>
</template>
</VueDatePicker>
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
const tomorrow = ref(new Date().getDate() + 1);
</script>
<style>
.slot-icon {
height: 20px;
width: auto;
}
</style>
action-buttons
This slot replaces the buttons section in the action row
Code Example
<template>
<VueDatePicker v-model="date" ref="dp">
<template #action-buttons>
<p class="custom-select" @click="selectDate">Select</p>
</template>
</VueDatePicker>
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
const dp = ref();
const selectDate = () => {
dp.value.selectDate();
}
</script>
<style>
.custom-select {
cursor: pointer;
color: var(--vp-c-text-2);
margin: 0;
display: inline-block;
}
</style>
action-preview
This slot replaces the date preview section in the action row
This slot will provide one prop
value
: Current selection in the picker, this can beDate
object, or in case of range,Date
array
Code Example
<template>
<VueDatePicker v-model="date" ref="dp">
<template #action-preview="{ value }">
{{ getDate(value) }}
</template>
</VueDatePicker>
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
const dp = ref();
const getDate = (dateVal) => {
const newDate = new Date(dateVal);
return `Selected ${newDate.getDate()}`;
}
</script>
action-extra
This slot provides extra space in the action row
One prop is available:
selectCurrentDate
- Function to call to select the date
Code Example
<template>
<VueDatePicker v-model="date">
<template #action-extra="{ selectCurrentDate }">
<span @click="selectCurrentDate()" title="Select current date">
<img class="slot-icon" src="/logo.png" />
</span>
</template>
</VueDatePicker>
</template>
<script setup>
import { ref } from 'vue';
const date = ref();
</script>
<style>
.slot-icon {
height: 20px;
width: auto;
cursor: pointer;
}
</style>
am-pm-button
This slot replaces the am-pm button in the time picker when the is-24
prop is set to false
Two props are available:
toggle
- Function to call to switch AM/PMvalue
- Currently active mode, AM or PM
Code Example
<template>
<VueDatePicker v-model="date">
<template #am-pm-button="{ toggle, value }">
<button @click="toggle">{{ value }}</button>
</template>
</VueDatePicker>
</template>
<script setup>
import { ref } from 'vue';
const date = ref();
</script>
left-sidebar
This slot will allow you to add custom content on the left side of the menu.
Note
If you use preset-ranges
prop, the sidebar will be added before the ranges' placement
On exposed props, instance
is the calendar index, single calendar will have instance 0, next 1 and so on
Warning
Depending on the mode used, different set of props will be exposed
Date pickers
This slot exposes the following:
import type { WritableComputedRef, ComputedRef } from 'vue';
interface Props {
modelValue: WritableComputedRef<Date | Date[] | (Date | null)[]>;
month: ComputedRef<(instance: number) => number>;
year: ComputedRef<(instance: number) => number>;
time: { hours: number | number[], minutes: number | number[], seconds: number | number[] };
updateMonthYear: (instance: number, val: {month: number; year: number; fromNav?: boolean}) => void;
selectDate: (day: {value: Date; current: boolean}, isNext: boolean = false) => void;
presetDateRange: (dates: Date[] | string[]) => void;
}
modelValue
- By modifying this variable, you will directly modify the current selectionmonth
- Access to a selected month for a given instanceyear
- Access to a selected year for a given instancetime
- Currently set time valuesupdateMonthYear
- Method to update month and year to a specific valueselectDate
- Method to select a date in the calendar- day parameter is an object with the following data
value
- Date objectcurrent
- boolean, depending if the given date is in the current month or not based on calendar view
- day parameter is an object with the following data
presetDateRange
- Preset date range
Month picker
import type { WritableComputedRef, ComputedRef } from 'vue';
interface Props {
modelValue: WritableComputedRef<Date | Date[] | (Date | null)[]>;
year: ComputedRef<(instance: number) => number>;
getModelMonthYear: { month: number; year: number } | { month: number, year: number }[]
selectMonth: (month: number, instance: number) => void;
selectYear: (year: number, instance: number) => void;
handleYear: (instance: number, increment = boolean) => void;
}
modelValue
- By modifying this variable, you will directly modify the current selectionyear
- Access to a selected year for a given instancegetModelMonthYear
- Function to call to extract month and year frominternalModelValue
selectYear
- Function that sets yearhandleYear
- Handles auto year increment/decrement
Year picker
import type { WritableComputedRef } from 'vue';
interface Props {
modelValue: WritableComputedRef<Date | Date[] | (Date | null)[]>;
selectYear: (year: number) => void;
}
modelValue
- By modifying this variable, you will directly modify the current selectionselectYear
- Function that sets year
Quarter picker
import type { WritableComputedRef } from 'vue';
interface Props {
modelValue: WritableComputedRef<Date | Date[] | (Date | null)[]>;
year: ComputedRef<(instance: number) => number>;
selectQuarter: (date: Date, instance: number, disabled: boolean) => void;
handleYearSelect: (year: number) => void;
handleYear: (instance: number, increment = boolean) => void;
}
modelValue
- By modifying this variable, you will directly modify the current selectionyear
- Access to a selected year for a given instanceselectQuarter
- Function that selects quarterhandleYearSelect
- Function that selects yearhandleYear
- Handles auto year increment/decrement
Time picker
import type { WritableComputedRef } from 'vue';
interface Props {
modelValue: WritableComputedRef<Date | Date[] | (Date | null)[]>;
time: { hours: number | number[]; minutes: number | number[]; seconds: number | number[] };
updateTime: (value: number | number[], isHours = true, isSeconds = false) => void;
}
modelValue
- By modifying this variable, you will directly modify the current selectiontime
- Reactive object containing time, may be different that the v-model set timeupdateTime
- Function that updates time
Code Example
<template>
<VueDatePicker v-model="date">
<template #left-sidebar="props">
<div>Custom content</div>
</template>
</VueDatePicker>
</template>
<script setup>
import { ref } from 'vue';
const date = ref();
</script>
right-sidebar
This slot will allow you to add custom content on the right side of the menu.
Note
On exposed props, instance
is the calendar index, single calendar will have instance 0, next 1 and so on
Warning
Depending on the mode used, different set of props will be exposed
This slot exposes the following:
import type { WritableComputedRef, ComputedRef } from 'vue';
interface Props {
modelValue: WritableComputedRef<Date | Date[] | (Date | null)[]>;
month: ComputedRef<(instance: number) => number>;
year: ComputedRef<(instance: number) => number>;
time: { hours: number | number[], minutes: number | number[], seconds: number | number[] };
updateMonthYear: (instance: number, val: {month: number; year: number; fromNav?: boolean}) => void;
selectDate: (day: {value: Date; current: boolean}, isNext: boolean = false) => void;
presetDateRange: (dates: Date[] | string[]) => void;
}
modelValue
- By modifying this variable, you will directly modify the current selectionmonth
- Access to a selected month for a given instanceyear
- Access to a selected year for a given instancetime
- Currently set time valuesupdateMonthYear
- Method to update month and year to a specific valueselectDate
- Method to select a date in the calendar- day parameter is an object with the following data
value
- Date objectcurrent
- boolean, depending if the given date is in the current month or not based on calendar view
- day parameter is an object with the following data
presetDateRange
- Preset date range
Month picker
import type { WritableComputedRef, ComputedRef } from 'vue';
interface Props {
modelValue: WritableComputedRef<Date | Date[] | (Date | null)[]>;
year: ComputedRef<(instance: number) => number>;
getModelMonthYear: { month: number; year: number } | { month: number, year: number }[]
selectMonth: (month: number, instance: number) => void;
selectYear: (year: number, instance: number) => void;
handleYear: (instance: number, increment = boolean) => void;
}
modelValue
- By modifying this variable, you will directly modify the current selectionyear
- Access to a selected year for a given instancegetModelMonthYear
- Function to call to extract month and year frominternalModelValue
selectYear
- Function that sets yearhandleYear
- Handles auto year increment/decrement
Year picker
import type { WritableComputedRef } from 'vue';
interface Props {
modelValue: WritableComputedRef<Date | Date[] | (Date | null)[]>;
selectYear: (year: number) => void;
}
modelValue
- By modifying this variable, you will directly modify the current selectionselectYear
- Function that sets year
Quarter picker
import type { WritableComputedRef } from 'vue';
interface Props {
modelValue: WritableComputedRef<Date | Date[] | (Date | null)[]>;
year: ComputedRef<(instance: number) => number>;
selectQuarter: (date: Date, instance: number, disabled: boolean) => void;
handleYearSelect: (year: number) => void;
handleYear: (instance: number, increment = boolean) => void;
}
modelValue
- By modifying this variable, you will directly modify the current selectionyear
- Access to a selected year for a given instanceselectQuarter
- Function that selects quarterhandleYearSelect
- Function that selects yearhandleYear
- Handles auto year increment/decrement
Time picker
import type { WritableComputedRef } from 'vue';
interface Props {
modelValue: WritableComputedRef<Date | Date[] | (Date | null)[]>;
time: { hours: number | number[]; minutes: number | number[]; seconds: number | number[] };
updateTime: (value: number | number[], isHours = true, isSeconds = false) => void;
}
modelValue
- By modifying this variable, you will directly modify the current selectiontime
- Reactive object containing time, may be different that the v-model set timeupdateTime
- Function that updates time
Code Example
<template>
<VueDatePicker v-model="date">
<template #right-sidebar>
<div>Custom content</div>
</template>
</VueDatePicker>
</template>
<script setup>
import { ref } from 'vue';
const date = ref();
</script>
marker-tooltip
This slot replaces the content inside the marker
tooltip
Two props are available:
tooltip
- The tooltip data provided in the arrayday
- The date marker is displayed on
Code Example
<template>
<VueDatePicker v-model="date" :markers="markers">
<template #marker-tooltip="{ tooltip, day }">
<div>Custom content on {{ day }}</div>
</template>
</VueDatePicker>
</template>
<script setup>
import { ref } from 'vue';
import addDays from 'date-fns/addDays';
const date = ref(new Date());
const markers = ref([
{
date: addDays(new Date(), 1),
type: 'dot',
tooltip: [{ text: 'Dot with tooltip', color: 'green' }],
},
{
date: addDays(new Date(), 2),
type: 'line',
tooltip: [
{ text: 'First tooltip', color: 'blue' },
{ text: 'Second tooltip', color: 'yellow' },
],
},
{
date: addDays(new Date(), 3),
type: 'dot',
color: 'yellow',
},
])
</script>
marker
This slot replaces the default marker
shape (line or dot)
Info
When slot is provided, you will have to do a custom styling in order to position it on the right place
Three props are available:
marker
- Provided marker configurationday
- The text value displayed in the calendar celldate
- The date marker is displayed on
Code Example
<template>
<VueDatePicker v-model="date" :markers="markers">
<template #marker="{ marker, day, date }">
<span class="custom-marker"></span>
</template>
</VueDatePicker>
</template>
<script setup>
import { ref } from 'vue';
import addDays from 'date-fns/addDays';
const date = ref(new Date());
const markers = ref([
{
date: addDays(new Date(), 1),
type: 'dot',
tooltip: [{ text: 'Dot with tooltip', color: 'green' }],
},
{
date: addDays(new Date(), 2),
type: 'line',
tooltip: [
{ text: 'First tooltip', color: 'blue' },
{ text: 'Second tooltip', color: 'yellow' },
],
},
{
date: addDays(new Date(), 3),
type: 'dot',
color: 'yellow',
},
])
</script>
<style>
.custom-marker {
position: absolute;
top: 0;
right: 0;
height: 8px;
width: 8px;
border-radius: 100%;
background-color: green;
}
</style>
quarter
This slot replaces the default quarter item
Two props are available:
value
- First date for a given quartertext
- The text value displayed in the quarter button
Code Example
<template>
<VueDatePicker v-model="quarter">
<template #quarter="{ value }">
<span>{{ formatQuarter(value) }}</span>
</template>
</VueDatePicker>
</template>
<script setup>
import {ref} from 'vue';
import { startOfQuarter, format } from "date-fns";
const date = ref(startOfQuarter(new Date()));
const formatQuarter = (quarter) => {
return format(quarter, 'QQQ')
}
</script>
top-extra
This slot provides extra space above the month and year selection area
One prop is available:
value
- Currently selected date(s) in the picker
Code Example
<template>
<VueDatePicker v-model="date">
<template #top-extra="{ value }">
<span v-if="value">Selected date: {{ value.getDate() }}</span>
<span v-else>No date selected</span>
</template>
</VueDatePicker>
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script>
menu-header
Similar to the top-extra
, however, not wrapped per calendar instance and spans across full menu width
Code Example
<template>
<VueDatePicker v-model="date">
<template #menu-header>
<div class="my-header">My custom header</div>
</template>
</VueDatePicker>
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script>
<style>
.my-header {
padding: 5px;
border: 1px solid red;
width: 100%;
text-align: center;
}
</style>