Migrating from v8

Breaking changes

• Removed deprecated props
  • Removed
    • auto-range
    • emit-timezone
    • partial-range
    • min-range
    • max-range
    • fixed-start
    • fixed-end
    • multi-dates-limit
    • show-last-in-range
    • no-disabled-range
    • disable-time-range-validation
    • input-class-name
    • menu-class-name
    • calendar-class-name
    • calendar-cell-class-name
• boolean value true in text-input configuration is replaced with string `'open' | 'toggle'
• dp__clear_icon class is changed to dp--clear-btn and now wraps the icon
• Removed calendarWrap and calendarDays from aria-labels due to accessibility violations
• When using the component with web components, it must be enabled explicitly via the config.shadowDom property

range props

Following props are moved to the range configuration object

auto-range

<template>
  <VueDatePicker
    range
    :auto-range="5"
    :range="{ autoRange: 5 }"
  />
</template>

partial-range

<template>
  <VueDatePicker
    range
    :partial-range="false"
    :range="{ partialRange: false }"
  />
</template>

min-range

<template>
  <VueDatePicker
    range
    :min-range="2"
    :range="{ minRange: 2 }"
  />
</template>

max-range

<template>
  <VueDatePicker
    range
    :max-range="10"
    :range="{ maxRange: 10 }"
  />
</template>

fixed-start

<template>
  <VueDatePicker
    range
    :fixed-start="true"
    :range="{ fixedStart: true }"
  />
</template>

fixed-end

<template>
  <VueDatePicker
    range
    :fixed-end="true"
    :range="{ fixedEnd: true }"
  />
</template>

show-last-in-range

<template>
  <VueDatePicker
    range
    :show-last-in-range="false"
    :range="{ showLastInRange: false }"
  />
</template>

no-disabled-range

<template>
  <VueDatePicker
    range
    :no-disabled-range="true"
    :range="{ noDisabledRange: true }"
  />
</template>

disable-time-range-validation

<template>
  <VueDatePicker
    range
    :disable-time-range-validation="true"
    :range="{ disableTimeRangeValidation: true }"
  />
</template>

emit-timezone

This prop is moved to the timezone configuration object

<template>
  <VueDatePicker
    emit-timezone="UTC"
    :timezone="{ emitTimezone: 'UTC' }"
  />
</template>

multi-dates-limit

This prop is moved to the multi-dates configuration object

<template>
  <VueDatePicker
    multi-dates
    multi-dates-limit="3"
    :multi-dates="{ limit: 3 }"
  />
</template>

class props

Following props are moved to the ui prop

input-class-name

<template>
  <VueDatePicker
    input-class-name="my-custom-class"
    :ui="{ input: 'my-custom-class' }"
  />
</template>

menu-class-name

<template>
  <VueDatePicker
    menu-class-name="my-custom-class"
    :ui="{ menu: 'my-custom-class' }"
  />
</template>

calendar-class-name

<template>
  <VueDatePicker
    calendar-class-name="my-custom-class"
    :ui="{ calendar: 'my-custom-class' }"
  />
</template>

calendar-cell-class-name

<template>
  <VueDatePicker
    calendar-cell-class-name="my-custom-class"
    :ui="{ calendarCell: 'my-custom-class' }"
  />
</template>

text-input

The boolean value true for openMenu property in text-input configration object is changed to string value 'open' | 'toggle'

<template>
  <VueDatePicker
    :text-input="{ openMenu: true }"
    :text-input="{ openMenu: 'open' }"
  />
</template>

aria-labels

Properties calendarWrap and calendarDays are removed from aria-labels prop

<template>
  <VueDatePicker
    :aria-labels="{ 
      calendarWrap: 'my custom label',
      calendarDays: 'my custom label'
    }" 
  />
</template>