Migrating from v5
Breaking changes
month-picker
andyear-picker
no longer have predefined value ifv-model
is emptyaria-label
for arrow buttons inmonth-picker
mode is changed to Next/Previous yearauto-apply-month
prop is removed (will work withauto-apply
prop set)show-now-button
prop is removedmonth-year
slot will have different props depending on the used mode- Property
handleMonthYearChange
is removed fromsidebar-[left/right]
slot props - Props changes (check props-reconfiguration)
- Removed:
multi-calendars-solo
multi-static
text-input-options
inline-with-input
preset-ranges
- Exposed method for the slot is renamed from
presetDateRange
topresetDate
- Exposed method for the slot is renamed from
- Property
menuAppear
intransitions
- Removed:
Props reconfiguration
Based on the list of removed props, and depending on your usage, you might need to do a slight adjustments to keep prior behaviour:
multi-calendars-solo
and multi-static
These 2 props are now merged into a configuration object that can be passed
to multi-calendars
prop
Info
For prop definition, check multi-calendars
prop
<template>
<VueDatePicker
multi-calendars
multi-calendars-solo
:multi-static="false"
:multi-calendars="{ solo: true, static: false }"
/>
</template>
text-input-options
text-input-options
prop is removed and can now be passed directly to the text-input
prop as a second parameter
Info
For prop definition, check text-input
prop
<template>
<VueDatePicker
text-input
:text-input-options="{ format: 'MM.dd.yyyy HH:mm' }"
:text-input="{ format: 'MM.dd.yyyy HH:mm' }"
/>
</template>
transitions
Property menuAppear
in transition
prop is removed and replaced with 2 additional properties, menuAppearTop
and menuAppearBottom
Info
For prop definition, check transitions
prop
<template>
<VueDatePicker :transitions="transitions" />
</template>
<script setup>
const transitions = {
menuAppear: 'my-custom-transition',
menuAppearTop: 'open-on-top-transition',
menuAppearBottom: 'open-on-bottom-transition'
}
</script>
inline-with-input
Configuration object with input: true
can be passed to inline
prop
Info
For prop definition, check inline
prop
<template>
<VueDatePicker
inline
inline-with-input
:inline="{ input: true }"
/>
</template>
preset-ranges
- Prop
preset-ranges
is renamed topreset-dates
- Property
range
is renamed tovalue
Info
For prop definition, check preset-dates
prop
<template>
<VueDatePicker
:preset-ranges="presetValues"
:preset-dates="presetValues"
/>
</template>
<script setup>
const presetValues = [
{ label: 'Today', range: [new Date(), new Date()] },
{ label: 'Today', value: [new Date(), new Date()] },
]
</script>