Vue Datepicker

Appearance

On this page

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
ts
interface Transitions {
    open?: string; 
    close?: string; 
    next?: string; 
    previous?: string; 
    menuAppear?: string; 
    vNext?: string; 
    vPrevious?: string; 
}
  • open and close are added on overlays show/hide
  • next and previous added when switching months in the calendar
  • menuAppear is added on menu open
  • vNext and vPrevious are added when switching months in the calendar in the vertical mode
Code Example
vue
<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
vue
<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
vue
<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
vue
<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
vue
<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
vue
<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
vue
<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>

Add a custom class to the datepicker menu wrapper

  • Type: string
  • Default: null
Code Example
vue
<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
vue
<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
vue
<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
vue
<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>

Released under the MIT License.

Copyright © 2021-present Vuepic