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 cell
• index: 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 calendar
• date: 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 be Date 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/PM
• value - 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 selection
• month- Access to a selected month for a given instance
• year - Access to a selected year for a given instance
• time - Currently set time values
• updateMonthYear - Method to update month and year to a specific value
• selectDate - Method to select a date in the calendar
  • day parameter is an object with the following data
    • value - Date object
    • current - boolean, depending if the given date is in the current month or not based on calendar view
• 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 selection
• year - Access to a selected year for a given instance
• getModelMonthYear - Function to call to extract month and year from internalModelValue
• selectYear - Function that sets year
• handleYear - 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 selection
• selectYear - 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 selection
• year - Access to a selected year for a given instance
• selectQuarter - Function that selects quarter
• handleYearSelect - Function that selects year
• handleYear - 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 selection
• time - Reactive object containing time, may be different that the v-model set time
• updateTime - 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 selection
• month- Access to a selected month for a given instance
• year - Access to a selected year for a given instance
• time - Currently set time values
• updateMonthYear - Method to update month and year to a specific value
• selectDate - Method to select a date in the calendar
  • day parameter is an object with the following data
    • value - Date object
    • current - boolean, depending if the given date is in the current month or not based on calendar view
• 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 selection
• year - Access to a selected year for a given instance
• getModelMonthYear - Function to call to extract month and year from internalModelValue
• selectYear - Function that sets year
• handleYear - 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 selection
• selectYear - 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 selection
• year - Access to a selected year for a given instance
• selectQuarter - Function that selects quarter
• handleYearSelect - Function that selects year
• handleYear - 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 selection
• time - Reactive object containing time, may be different that the v-model set time
• updateTime - 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 array
• day - 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 configuration
• day - The text value displayed in the calendar cell
• date - 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 quarter
• text - 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>