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
- Removed
boolean
valuetrue
intext-input
configuration is replaced with string `'open' | 'toggle'dp__clear_icon
class is changed todp--clear-btn
and now wraps the icon- Removed
calendarWrap
andcalendarDays
fromaria-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>