Content

Customize parts in the datepicker menu

calendar-header

Replace the content in the calendar header cells

• Exposed props:

{
  day: string;
  index: number;
}

INFO

• day is the displayed value in the header cell
• index is the column index it is rendered by

Code Example

<template>
  <VueDatePicker v-model="date">
    <template #calendar-header="{ index, day }">
      <div :style="index === 5 || index === 6 ? 'color: red' : ''">
        {{ day }}
      </div>
    </template>
  </VueDatePicker>
</template>

<script setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
</script>

day

This slot allows you to place custom content in the calendar

• Exposed props:

{
  day: number;
  date: Date
}

INFO

• 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 src="/logo.png"/>
      </template>
      <template v-else>
        {{ day }}
      </template>
    </template>
  </VueDatePicker>
</template>

<script setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
</script>

action-buttons

This slot replaces the buttons section in the action row

• Exposed props:

{
  value: Date | Date[] | null
  selectDate: () => void
  selectionDisabled: boolean 
}

INFO

• value - Current selection in the picker
• selectDate - Function to call to select current selection in the picker
• selectionDisabled - Boolean indicating if the picked selection is valid or not

Code Example

<template>
  <VueDatePicker v-model="date" ref="datepicker">
    <template #action-buttons>
      <p @click="selectDate">Select</p>
    </template>
  </VueDatePicker>
</template>

<script setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref, useTemplateRef } from 'vue';

  const date = ref();
  const dp = useTemplateRef('datepicker')

  const selectDate = () => {
    dp.value?.selectDate();
  }
</script>

action-preview

This slot replaces the date preview section in the action row

• Exposed props:

{
  value: Date | Date[] | null;
  formatValue: string;
}

INFO

• value - Current selection in the picker
• formatValue - Formatted value of the selected date(s)

Code Example

<template>
    <VueDatePicker v-model="date" ref="dp">
      <template #action-preview="{ value }">
        {{ getDate(value) }}
      </template>
    </VueDatePicker>
</template>

<script setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
</script>

action-extra

This slot provides extra space in the action row

• Exposed props:

{
  selectCurrentDate: () => void
}

INFO

• selectCurrentDate - Function to call to select the date (same one as now button calls)

Code Example

<template>
  <VueDatePicker v-model="date">
   <template #action-extra="{ selectCurrentDate }">
     <span @click="selectCurrentDate()" title="Select current date">
       <img src="/logo.png" />
     </span>
   </template>
  </VueDatePicker>
</template>

<script setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
</script>

am-pm-button

This slot replaces the am-pm button in the time picker when the timeConfig.is24 prop is set to false

• Exposed props:

{
  toggle: () => void
  value: 'AM' | 'PM'
}

INFO

• toggle - Function to call to switch AM/PM
• value - Currently active mode, AM or PM

Code Example

<template>
  <VueDatePicker v-model="date" :time-config="{ is24: false }">
    <template #am-pm-button="{ toggle, value }">
      <button @click="toggle">{{ value }}</button>
    </template>
  </VueDatePicker>
</template>

<script setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  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.

INFO

If you use preset-dates prop, the sidebar will be added before the list 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, a different set of props will be exposed

Date pickers

• Exposed props:

export interface DatePickerSidebarSlotProps {
  modelValue: InternalModelValue;
  month: ComputedRef<(instance: number) => number>;
  year: ComputedRef<(instance: number) => number>;
  time: InternalTime;
  updateTime: (time: TimeInternalModel) => void;
  updateMonthYear: (instance: number, val: { month: number; year: number; fromNav?: boolean }) => void;
  selectDate: (year: number, instance: number) => void;
  presetDate: (value: Date[] | string[] | Date | string, noTz?: boolean) => void;
}

INFO

• modelValue - Internal model value
• 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
• presetDate - Set date or date range

Month picker

• Exposed props:

export interface MonthPickerSidebarSlotProps {
  modelValue: InternalModelValue;
  year: ComputedRef<(instance: number) => number>;
  getModelMonthYear?: () => { month: number | null; year: number | null }[];
  selectMonth: (month: number, instance: number) => void;
  selectYear: (year: number, instance: number) => void;
  handleYear: (instance: number, increment?: boolean) => void;
}

INFO

• modelValue - Internal model value
• 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

• Exposed props:

export interface YearPickerSidebarSlotProps {
  modelValue: InternalModelValue;
  selectYear: (year: number) => void;
}

INFO

• modelValue - Internal model value
• selectYear - Function that sets year

Quarter picker

• Exposed props:

export interface QuarterPickerSidebarSlotProps {
  modelValue: InternalModelValue;
  year: ComputedRef<(instance: number) => number>;
  selectQuarter: (date: Date, instance: number, disabled: boolean) => void;
  handleYearSelect: (year: number, instance: number) => void;
  handleYear: (instance: number, increment?: boolean) => void;
}

INFO

• modelValue - Internal model value
• 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

• Exposed props:

export interface TimePickerSidebarSlotProps {
  modelValue: InternalModelValue;
  time: InternalTime;
  updateTime: (time: TimeInternalModel) => void;
}

INFO

• modelValue - Internal model value
• time - Reactive object containing time, may be different from 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 { VueDatePicker } from '@vuepic/vue-datepicker';
  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.

INFO

• Same prop specification as left-sidebar slot

Code Example

<template>
  <VueDatePicker v-model="date">
    <template #right-sidebar="props">
      <div>Custom content</div>
      </template>
  </VueDatePicker>
</template>

<script setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
</script>

marker-tooltip

This slot replaces the content inside the marker tooltip

• Exposed props:

{
  tooltip: { text: string; color?: string };
  day: Date;
}

INFO

• tooltip - The tooltip data provided in the array
• day - The date marker is displayed on

WARNING

Tooltip color will be ignored if this slot is provided; you will have to style it yourself

Code Example

<template>
  <VueDatePicker v-model="date" :markers="markers">
    <template #marker-tooltip="{ tooltip, day }">
      <div v-if="tooltip.color === 'green'">Hello from slot</div>
      <span v-else>{{ tooltip.text }}</span>
    </template>
  </VueDatePicker>
</template>

<script setup>
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';
  import addDays from 'date-fns/addDays';

  const date = ref();
  const markers = [
    {
      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)

WARNING

When the slot is provided, you will have to apply custom styling to position it in the right place

• Exposed props:

{
  marker: Marker;
  day: string;
  date: Date;
}

INFO

• marker - Provided marker configuration, see markers for Marker type
• 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 { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';
  import addDays from 'date-fns/addDays';

  const date = ref();
  const markers = [
    {
      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 scoped>
  .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

• Exposed props:

{
  value: Date;
  text: string;
}

INFO

• 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 { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
  
  const formatQuarter = (quarter) => {
    return format(quarter, 'QQQ')
  }
</script>

top-extra

This slot provides extra space above the month and year selection area

• Exposed props:

{
    value: Date | Date[] | null
}

INFO

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 { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
</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 { VueDatePicker } from '@vuepic/vue-datepicker';
  import { ref } from 'vue';

  const date = ref();
</script>

<style scoped>
  .my-header {
    padding: 5px;
    border: 1px solid red;
    width: 100%; 
    text-align: center;
  }
</style>