Skip to content
ads via Carbon Check out the latest remote job listings from the leading job board for designers, developers, and creative pros. ads via Carbon

Migrating from v7

Breaking changes

  • Default week-picker format is changed to week numbers
  • Tabbing out from the overlay will shift focus to the action row button if present
  • Removed deprecated props
    • Removed
      • highlight-week-days
      • highlight-disabled-days
      • highlight prop types
        • Date[]
        • string[]
        • number[]
  • id for calendar days is changed to formatted value instead of ISO value
  • date-fns-tz library is removed
  • date-fns-tz library is updated to v3

highlight

Info

For prop definition, check highlight prop

js
<template>
  <VueDatePicker
    :highlight="[new Date()]"
    :highlight="{ days: [ new Date() ] }"
  />
</template>

highlight-week-days

This prop is now part of the highlight prop

Info

For prop definition, check highlight prop

js
<template>
  <VueDatePicker
    :highlight-week-days="[1, 2, 3]"
    :highlight="{ weekdays: [1, 2, 3] }"
  />
</template>

highlight-disabled-days

This prop is now part of the highlight prop

Info

For prop definition, check highlight prop

js
<template>
  <VueDatePicker
    highlight-disabled-days
    :highlight="{ options: { highlightDisabled: true } }"
  />
</template>

Calendar cells id

js
import { format } from 'date-fns';

const today = new Date();

const cellEl = document.getElementById(today.toISOString().split("T")[0]); 
const cellEl = document.getElementById(format(today, 'yyyy-MM-dd')) 

date-fns and date-fns-tz

  • date-fns-tz library is removed as peer dependency from the picker
  • date-fns library is updated to v3. If you use it somewhere else in your project, make sure to check the changelog for potential breaking changes

Released under the MIT License.