Skip to content

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

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

partial-range

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

min-range

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

max-range

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

fixed-start

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

fixed-end

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

show-last-in-range

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

no-disabled-range

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

disable-time-range-validation

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

emit-timezone

This prop is moved to the timezone configuration object

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

multi-dates-limit

This prop is moved to the multi-dates configuration object

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

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

menu-class-name

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

calendar-class-name

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

calendar-cell-class-name

js
<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'

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

aria-labels

Properties calendarWrap and calendarDays are removed from aria-labels prop

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

Released under the MIT License.