Look and feel

Customization options

Info

• When checking the examples, for boolean prop types, the example will show the behavior opposite of what is set for the default value
• If you use the component in the browser <script> tag, make sure to pass multi-word props with -, for example, sixWeeks as six-weeks and so on

transitions

Control transitions inside the menu. You can define your own or disable them. Datepicker uses Vue built in transitions component for transitions control. To configure you own, please check the Vue documentation and provide a transition name in the prop

• Type: Transitions | boolean
• Default: true

interface Transitions {
    open?: string; 
    close?: string; 
    next?: string; 
    previous?: string;
    menuAppearTop?: string; 
    menuAppearBottom?: string; 
    vNext?: string; 
    vPrevious?: string; 
}

• open and close are added on overlays show/hide
• next and previous added when switching months in the calendar
• menuAppearTop is added when the menu is open above the input filed
• menuAppearBottom is added when the menu is open bellow the input field
• vNext and vPrevious are added when switching months in the calendar in the vertical mode

Code Example

<template>
    <VueDatePicker v-model="date" :transitions="false" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

six-weeks

Always display six weeks on the calendar. This will prevent dynamic calendar height change depending on the month

• Type: boolean | 'append' | 'prepend' | 'center' | 'fair'
• Default: false

Info

• boolean - Legacy enable, same as append
• 'append' - Always add new row(s) at the bottom of the calendar
• 'prepend' - Always add new row(s) at the beginning of the calendar
• 'center' - If the month that needs padding starts with the beginning of a week, add a week at the start. If a second week needs to be added, add it in the end. This way, every month will have offset days on each end, and months like Feb. 2021 will not have that huge tail. This mode does not add a week before if the month already starts with a partial week
• 'fair' - The first extra week is added to either start or end of the month, depending on which partial week has fewer offset days. This solves the same problems as center, but aims to distribute the padding more evenly. Since it leads to more months having a leading offset week, which is not necessarily desirable. The difference is visible e.g. in June 2021

Code Example

<template>
  <div class="buttons-wrap">
    <button
        v-for="(btn, i) in buttons"
        :key="i"
        @click="mode = btn"
    >
      {{ btn }}
    </button>
  </div>
  <VueDatePicker v-model="date" :six-weeks="mode" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
const buttons = [true, 'append', 'prepend', 'center', 'fair'];
const mode = ref<boolean | string>(true);
</script>

dark

Theme switch between the dark and light mode

• Type: boolean
• Default: false

Code Example

<template>
    <VueDatePicker v-model="date" dark />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

offset

Number of pixels between the menu and input

• Type: number | string
• Default: 10

Code Example

<template>
    <VueDatePicker v-model="date" :offset="20" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

hide-input-icon

Hide calendar icon in the input field

• Type: boolean
• Default: false

Code Example

<template>
    <VueDatePicker v-model="date" hide-input-icon />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

state

Validation state of the calendar value. Sets the green/red border depending on the value

• Type: boolean
• Default: null

Code Example

<template>
    <VueDatePicker v-model="date" :state="false" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

input-class-name

Add a custom class to the input field

• Type: string
• Default: null

Code Example

<template>
    <VueDatePicker v-model="date" input-class-name="dp-custom-input" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

<style lang="scss">
.dp-custom-input {
  box-shadow: 0 0 6px #1976d2;
  color: #1976d2;

  &:hover {
    border-color: #1976d2;
  }
}
</style>

menu-class-name

Add a custom class to the datepicker menu wrapper

• Type: string
• Default: null

Code Example

<template>
    <VueDatePicker v-model="date" menu-class-name="dp-custom-menu" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

<style lang="scss">
.dp-custom-menu {
  box-shadow: 0 0 6px #1976d2;
}
</style>

calendar-class-name

Add a custom class to the calendar wrapper

• Type: string
• Default: null

Code Example

<template>
    <VueDatePicker v-model="date" calendar-class-name="dp-custom-calendar" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

<style lang="scss">
.dp-custom-calendar {
  .dp__calendar_item {
    border: 1px solid var(--dp-border-color-hover);
  }
}
</style>

calendar-cell-class-name

Add a custom class to the calendar cell wrapper

• Type: string
• Default: null

Code Example

<template>
    <VueDatePicker v-model="date"  calendar-cell-class-name="dp-custom-cell" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

<style lang="scss">
.dp-custom-cell {
  border-radius: 50%;
}
</style>

day-class

Add custom class to the calendar cell depending on the date

• Type: (date: Date) => string
• Default: null

Code Example

<template>
    <VueDatePicker v-model="date" :day-class="getDayClass" />
</template>

<script setup>
import { ref } from 'vue';
import { addDays, isEqual, set } from 'date-fns';

const date = ref(new Date());

const getDayClass = (date) => {
  if (isEqual(date, addDays(set(new Date(), { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 }), 1)))
    return 'marked-cell';
  return '';
};
</script>