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

vue

<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>

<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

vue

<template>
    <VueDatePicker 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>
    </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>

<template>
    <VueDatePicker 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>
    </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

vue

<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>

<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

vue

<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>

<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

vue

<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>

<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

vue

<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>

<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>

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;
}

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;
}

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;
}

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;
}

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;
}

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

vue

<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>

<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>

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;
}

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;
}

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;
}

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;
}

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;
}

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

vue

<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>

<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>

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

vue

<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>

<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

vue

<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>

<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

vue

<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>

<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>

Content ​

calendar-header ​

day ​

action-buttons ​

action-preview ​

action-extra ​

am-pm-button ​

left-sidebar ​

right-sidebar ​

marker-tooltip ​

marker ​

quarter ​

Content

calendar-header

day

action-buttons

action-preview

action-extra

am-pm-button

left-sidebar

right-sidebar

marker-tooltip

marker

quarter