Vue DatepickerContent
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
vue
<template>
<Datepicker v-model="date">
<template #calendar-header="{ index, day }">
<div :class="index === 5 || index === 6 ? 'red-color' : ''">
{{ day }}
</div>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
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
vue
<template>
<Datepicker v-model="date">
<template #day="{ day, date }">
<temlplate v-if="day === tomorrow">
<img class="slot-icon" src="/logo.png"/>
</temlplate>
<template v-else>
{{ day }}
</template>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
const tomorrow = ref(new Date().getDate() + 1);
return {
date,
tomorrow,
}
}
}
</script>
<style>
.slot-icon {
height: 20px;
width: auto;
}
</style>
action-select
This slot replaces the select and cancel button section in the action row
Code Example
vue
<template>
<Datepicker v-model="date" ref="dp">
<template #action-select>
<p class="custom-select" @click="selectDate">Select</p>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
const dp = ref();
const selectDate = () => {
ref.value.selectDate();
}
return {
date,
dp,
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 beDateobject, or in case of range,Datearray
Code Example
vue
<template>
<Datepicker v-model="date" ref="dp">
<template #action-preview="{ value }">
{{ getDate(value) }}
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
const dp = ref();
const getDate = (dateVal) => {
const newDate = new Date(dateVal);
return `Selected ${newDate.getDate()}`;
}
return {
date,
dp,
getDate,
}
}
}
</script>
now-button
This slot replaces the content in the now button wrapper
TIP
To use this slot, make sure that show-now-button prop is enabled
One prop is available:
selectCurrentDate- Function to call to select the date
Code Example
vue
<template>
<Datepicker v-model="date" show-now-button>
<template #now-button="{ selectCurrentDate }">
<span @click="selectCurrentDate()" title="Select current date">
<img class="slot-icon" src="/logo.png" />
</span>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</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
vue
<template>
<Datepicker v-model="date">
<template #am-pm-button="{ toggle, value }">
<button @click="toggle">{{ value }}</button>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</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
Code Example
vue
<template>
<Datepicker v-model="date">
<template #left-sidebar>
<div>Custom content</div>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
right-sidebar
This slot will allow you to add custom content on the right side of the menu.
Code Example
vue
<template>
<Datepicker v-model="date">
<template #right-sidebar>
<div>Custom content</div>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref();
return {
date,
}
}
}
</script>
marker-tooltip
This slot replaces the content inside the marker tooltip
Two props are available:
tooltop- The tooltip data provided in the arrayday- The date marker is displayed on
Code Example
vue
<template>
<Datepicker v-model="date" :markers="markers">
<template #marker-tooltip="{ tooltop, day }">
<div>Custom content on {{ day }}</div>
</template>
</Datepicker>
</template>
<script>
import { ref } from 'vue';
import addDays from 'date-fns/addDays';
export default {
setup() {
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',
},
])
return {
date,
markers,
}
}
}
</script>