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
assix-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;
menuAppearTop?: string;
menuAppearBottom?: string;
vNext?: string;
vPrevious?: string;
}
open
andclose
are added on overlays show/hidenext
andprevious
added when switching months in the calendarmenuAppearTop
is added when the menu is open above the input filedmenuAppearBottom
is added when the menu is open bellow the input fieldvNext
andvPrevious
are added when switching months in the calendar in thevertical
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>
ui
Configure custom classes for a specific element
- Type:
Partial<UIOptions>
- Default:
{}
ts
type CustomClass = string | string[];
interface UIOptions {
navBtnNext: CustomClass;
navBtnPrev: CustomClass;
calendar: CustomClass;
calendarCell: CustomClass;
menu: CustomClass;
input: CustomClass;
}
input
: Add a custom class to the input fieldmenu
: Add a custom class to the datepicker menu wrappercalendar
: Add a custom class to the calendar wrappercalendarCell
: Add a custom class to the calendar cell wrappernavBtnNext
: Add a custom class on navigation button 'next'navBtnPrev
: Add a custom class on navigation button 'previous'
day-class
Add custom class to the calendar cell depending on the date
- Type:
(date: Date, internalModelValue: InternalModelValue) => string
- Default:
null
ts
type InternalModelValue = Date | Date[] | 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, _internalDate) => {
if (isEqual(date, addDays(set(new Date(), { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 }), 1)))
return 'marked-cell';
return '';
};
</script>