Skip to content

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)

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

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

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

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

vue
<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-ranges is renamed to preset-dates
  • Property range is renamed to value

Info

For prop definition, check preset-dates prop

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

Released under the MIT License.