Vue DatepickerMigrating from v5
Breaking changes
month-pickerandyear-pickerno longer have predefined value ifv-modelis emptyaria-labelfor arrow buttons inmonth-pickermode is changed to Next/Previous yearauto-apply-monthprop is removed (will work withauto-applyprop set)show-now-buttonprop is removedmonth-yearslot will have different props depending on the used mode- Property
handleMonthYearChangeis removed fromsidebar-[left/right]slot props - Props changes (check props-reconfiguration)
- Removed:
multi-calendars-solomulti-statictext-input-optionsinline-with-inputpreset-ranges- Exposed method for the slot is renamed from
presetDateRangetopresetDate
- Exposed method for the slot is renamed from
- Property
menuAppearintransitions
- 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>
<script setup></script><template>
<VueDatePicker
multi-calendars
multi-calendars-solo
:multi-static="false"
:multi-calendars="{ solo: true, static: false }"
/>
</template>
<script setup></script>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>
<script setup></script><template>
<VueDatePicker
text-input
:text-input-options="{ format: 'MM.dd.yyyy HH:mm' }"
:text-input="{ format: 'MM.dd.yyyy HH:mm' }"
/>
</template>
<script setup></script>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><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>
<script setup></script><template>
<VueDatePicker
inline
inline-with-input
:inline="{ input: true }"
/>
</template>
<script setup></script>preset-ranges
- Prop
preset-rangesis renamed topreset-dates - Property
rangeis 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><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>