Migrating from v5

Breaking changes

• month-picker and year-picker no longer have predefined value if v-model is empty
• aria-label for arrow buttons in month-picker mode is changed to Next/Previous year
• auto-apply-month prop is removed (will work with auto-apply prop set)
• show-now-button prop is removed
• month-year slot will have different props depending on the used mode
• Property handleMonthYearChange is removed from sidebar-[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 to presetDate
    • Property menuAppear in transitions

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  // [!code --]
    multi-calendars-solo  // [!code --]
    :multi-static="false"  // [!code --]
    :multi-calendars="{ solo: true, static: false }" // [!code ++]
  />

</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  // [!code --]
    :text-input-options="{ format: 'MM.dd.yyyy HH:mm' }"  // [!code --]
    :text-input="{ format: 'MM.dd.yyyy HH:mm' }"  // [!code ++]
  />

</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>

inline-with-input

Configuration object with input: true can be passed to inline prop

Info

For prop definition, check inline prop

<template>
  <VueDatePicker
    inline  // [!code --]
    inline-with-input  // [!code --]
    :inline="{ input: true }"  // [!code ++]
  />

</template>


<script setup></script>

preset-ranges

• Prop preset-ranges is renamed to preset-dates
• Property range is renamed to value

Info

For prop definition, check preset-dates prop

<template>
  <VueDatePicker
        :preset-ranges="presetValues" // [!code --]
        :preset-dates="presetValues" // [!code ++]
  />
</template>

<script setup>
  const presetValues = [
    { label: 'Today', range: [new Date(), new Date()] }, 
    { label: 'Today', value: [new Date(), new Date()] }, 
  ]
</script>