Vue Datepicker

Appearance

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

This slot exposes the following:

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

This slot exposes the following:

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

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

Released under the MIT License.

Copyright © 2021-present Vuepic