Bug Fixes

• Fix valid-hours and minute-increment props for input slot usage
• Fix bug where date picker would reset null dates

Improvements

• Allow separate valid-hours and minute-increment for range dates

Bug Fixes

• Fix valid-hours and minute-increment props for input slot usage
• Fix bug where date picker would reset null dates

Improvements

• Allow separate valid-hours and minute-increment for range dates

Bug Fixes

• Fix defaults when using plugin
• Fix iso mask
• Fix broken navigation state when using max-date
• Fix double arrows appearing in time picker when using Tailwind reset styles

Improvements

• Add valid-hours prop for time picker

Bug Fixes

• Fix edge case when switching date modes
• Fix double arrows appearing in time picker when using Tailwind reset styles

Improvements

• Add valid-hours prop

Port event handling updates from v2.3.4.

Bug Fixes

• Fix broken removal of event handlers in calendar and date picker
• Dependabot updates

Improvements

• Remove custom click detection handlers for Mobile Safari

Bug Fixes

• Fix input format and debounce
• Fix footer slot

Bug Fixes

• Bump dependency versions

Bug Fixes

• Fix DatePicker export
• Fix scoped slot usage

Bug Fixes

• Fix trim-weeks missing dates if firstDayOfWeek !== 1
• Fix input format on calendar hide
• Fix date range normalization for time and input updates

Improvements

• Add show-weeknumbers prop (Boolean | String) with support for left, left-outside, right or right-outside positions
• Add weeknumberclick event that emits week data on click

{
  weeknumber: Number, // Weeknumber clicked
  days: [Day], // List of day objects for the weeknumber clicked
  event: MouseEvent, // Native event emitted
}

Bug Fixes

• Set inheritAttrs to false for calendar pane component
• Fix null dates for time picker when mode === 'time'

Improvements

• Add modelConfig.fillDate parameter to fill missing date parts
• Provide popover options as defaults for showPopover, hidePopover, togglePopover

Bug Fixes

• Fix on-bottom class when trim-weeks prop is used
• Fix date range clearing and page adjustment when end date is missing

Improvements

• Update lodash to fix security vulnerability

Bug Fixes

• Fix bug with disabling certain month and year items if any min or max props are provided.

Improvements

• Disables navigation to next and previous groups of month and year items when needed. :tada:

Bug Fixes

• Set timezone offset to 0 for ISO dates that end with Z
• Adjust date timezone to UTC when formatting with masks that end with Z

Enhancements

• Use a default ISO mask for string dates that matches the browser: YYYY-MM-DDTHH:mm:ss.SSSZ
• Add ZZ, ZZZ and ZZZZ mask tokens
• Add unit tests for DatePicker and TimePicker with string dates

Bug Fixes

• Fix time parse for browsers < Safari 14

Bug Fixes

• Fix css for nav current month, title & weekday labels

Bug Fixes

• Fix popover.keepVisibleOnInput
• Patch Media Query addEventListener for browsers < Safari 14, < Edge 16
• Fix focus styles in navigation pane

Enhancements

• Remove dedicated Grid component to reduce DOM elements and package size
• Remove unnecessary JS/CSS
• Tighten min pane width to 250px

Bug Fixes

• Toggle date value to null if date is re-selected and is-required is false. This only applies if is-range is false
• Use is-required prop to prevent null date values on re-select or clearing input element
• Prevent hiding picker if disabled date is selected

Enhancements

• Shortens picker popover hide delay to prevent multiple rapid date selections

Bug Fixes

• Fix container height in flex containers
• Fix disabled date detection
• Fix timezone offset calculation

Support for Vue 3.0, Typescript as ESM builds.

Reference README for installation.

• Fixes aria-label for calendar days
• Adds trim-weeks prop for both calendars and date pickers
• Adds force option to move and focusDate methods
• Adds move and focusDate method wrappers to date picker
• Convert move and focusDate to promise-based methods for compatibility
• Adds showDelay and hideDelay options for date picker popover
• Adds showDelay, hideDelay and transition options for attribute popovers

Enhancements

Adds footer slot support for date pickers Adds popover.transition option (slide, slide-fade, none or ``) Uses passive touch handlers to prevent Chrome warning

Bug Fixes

Fixes single use of highlight.contentStyle or highlight.contentClass

Enhancements

Time picker styling improvements. Display non-matched minute options when using minute-interval

v2.0.0

This version introduces a significant number of breaking changes, all of which have been introduced to streamline component simplicity and size.

Reference the guides below to help update your v-calendar and v-date-picker components to this version.

Add @popperjs/core to dependencies

Popper.js has been converted to a peer dependency to trim down the size of the package. As a result, @popperjs/core must be installed as a dependency within your application in order for popovers to work properly.

Calendar Conversion Guide

1. Use timezones (optional)
2. Use footer scoped slot
3. Attribute styles

1. Use timezones (optional)

Timezone support via timezone prop (UTC, America/Chicago, etc.)

• Local timezone is used if not supplied (default)
• Timezone names allowed (UTC, America/Chicago, etc.)
• Uses Intl api for native browser date conversions

Note: The timezone prop is optional and should only be used in special cases.

2. Use footer scoped slot

The footer slot may be used to place your own custom content at the bottom of the calendar.

<v-calendar ref="calendar">
  <template v-slot:footer>
    <div class="bg-gray-100 text-center p-2 border-t rounded-b-lg">
      <button
        class="bg-blue-500 text-white font-medium px-2 py-1 rounded hover:bg-blue-600"
        @click="moveToToday"
      >
        Today
      </button>
    </div>
  </template>
</v-calendar>

export default {
  methods: {
    moveToToday() {
      this.$refs.calendar.move(new Date());
    },
  },
};

<v-calendar :attributes="attributes" />

export default {
  data() {
    return {
      attributes: [
        { dot: { style: { backgroundColor: 'brown' } }, dates: new Date() },
      ],
    };
  },
};

<v-date-picker v-model="date" mode="date" />

<v-date-picker v-model="date" mode="dateTime" />

<v-date-picker v-model="date" mode="time" />

<v-date-picker mode="dateTime" v-model="dateRange" is-range>

data() {
  return {
    dateRange: {
      start: new Date(2020, 0, 6),
      end: new Date(2020, 0, 10),
    }
  }
}

<v-date-picker v-model="date" mode="dateTime" :masks="masks">
  <template v-slot="{ inputValue, inputEvents }">
    <input
      class="bg-white border px-2 py-1 rounded"
      :value="inputValue"
      v-on="inputEvents"
    />
  </template>
</v-date-picker>

export default {
  data() {
    return {
      date: new Date(),
      masks: {
        input: 'YYYY-MM-DD h:mm A',
      },
    };
  },
};

<v-date-picker v-model="date">

data() {
  return {
    date: new Date()
  }
}

<v-date-picker v-model="date">
  <template v-slot="{ inputValue, inputEvents }">
    <input
      class="bg-white border px-2 py-1 rounded"
      :value="inputValue"
      v-on="inputEvents"
    />
  </template>
</v-date-picker>

v2.0.0-beta.0

This version introduces a significant number of breaking changes, all of which have been introduced to streamline component simplicity and size.

Reference the guides below to help update your v-calendar and v-date-picker components to this version.

Add @popperjs/core to dependencies

Popper.js has been converted to a peer dependency to trim down the size of the package. As a result, @popperjs/core must be installed as a dependency within your application in order for popovers to work properly.

Calendar Conversion Guide

1. Use timezones (optional)
2. Use footer scoped slot
3. Attribute styles

1. Use timezones (optional)

Timezone support via timezone prop (UTC, America/Chicago, etc.)

• Local timezone is used if not supplied (default)
• Timezone names allowed (UTC, America/Chicago, etc.)
• Uses Intl api for native browser date conversions

Note: The timezone prop is optional and should only be used in special cases.

2. Use footer scoped slot

The footer slot may be used to place your own custom content at the bottom of the calendar.

<v-calendar ref="calendar">
  <template v-slot:footer>
    <div class="bg-gray-100 text-center p-2 border-t rounded-b-lg">
      <button
        class="bg-blue-500 text-white font-medium px-2 py-1 rounded hover:bg-blue-600"
        @click="moveToToday"
      >
        Today
      </button>
    </div>
  </template>
</v-calendar>

export default {
  methods: {
    moveToToday() {
      this.$refs.calendar.move(new Date());
    },
  },
};

<v-calendar :attributes="attributes" />

export default {
  data() {
    return {
      attributes: [
        { dot: { style: { backgroundColor: 'brown' } }, dates: new Date() },
      ],
    };
  },
};

<v-date-picker v-model="date" mode="date" />

<v-date-picker v-model="date" mode="dateTime" />

<v-date-picker v-model="date" mode="time" />

<v-date-picker mode="dateTime" v-model="dateRange" is-range>

data() {
  return {
    dateRange: {
      start: new Date(2020, 0, 6),
      end: new Date(2020, 0, 10),
    }
  }
}

<v-date-picker v-model="date" mode="dateTime" :masks="masks">
  <template v-slot="{ inputValue, inputEvents }">
    <input
      class="bg-white border px-2 py-1 rounded"
      :value="inputValue"
      v-on="inputEvents"
    />
  </template>
</v-date-picker>

export default {
  data() {
    return {
      date: new Date(),
      masks: {
        input: 'YYYY-MM-DD h:mm A',
      },
    };
  },
};

<v-date-picker v-model="date">

data() {
  return {
    date: new Date()
  }
}

<v-date-picker v-model="date">
  <template v-slot="{ inputValue, inputEvents }">
    <input
      class="bg-white border px-2 py-1 rounded"
      :value="inputValue"
      v-on="inputEvents"
    />
  </template>
</v-date-picker>

Bug Fixes

v-date-picker

• Fixes bug where calling slot method updateValue with formatInput: false was not working.
• Rename update-on-input-keyup prop to simply update-on-input.

defaults

• Rename datePickerUpdateOnInputKeyup to simply datePickerUpdateOnInput.

Improvements

v-calendar

• :tada: :tada: :tada: Adds support for 'day-content' slots. This adds a lot of flexibility by allowing you to provide your own day cells. The layout has also been improved to grow with your cells, so you can now build larger calendars to fill with your own content.

<v-calendar>
  <div
    slot='day-content'
    slot-scope='{ day, attributes, contentStyle }'
    class='my-day'>
    <!-- Be sure to display the day of the month somewhere in your content -->
    {{ day.day }}
  </div>
</v-calendar>

/* Set width and height and `v-calendar` will resize appropriately */
.my-day {
  width: 40px;
  height: 40px;
}
/* You can also apply your own hover styles */
.my-day:hover {
  background-color: #dadada;
}

You can get access to the following slot props:

| Prop | Type | Description | | ---- | ---- | ----------- | | day | Object | Object with various day info. Use the day.day number prop to display the day of month in your slot content. | | attibutes | Array | List of attributes for this day. | | contentStyle | Object | Content style to apply if you wish, derived from themeStyles.dayContent and other attributes. |

Bug Fixes

v-date-picker

• Fix bug where 'Do' format token was not supported. Closes #127.

Bug Fixes

v-calendar

• Fix bug where initial update:frompage and update:topage events missing page argument. Closes #125.

v-date-picker

• Fix bug where formats prop not getting forwarded to v-calendar. Closes #123.

popover

• Modify tabindex to improve tab navigation. Closes #119.
• Fix bug where content container element was overflowing window on mobile.

Improvements

v-date-picker

• Improve input key handing, specifically for enter and esc keys
• Added update-on-input-keyup prop to update picker selection on every keyup event.
• Custom slot method updateValue can now accept options as the second parameter. Closes #118.

| Property | Description | Default Value | | -------- | ----------- | ------------- | | formatInput | If new value is valid, date picker should reformat the inputValue (based on formats.input). | true | | hidePopover | If new valud is valid, date picker should hide popover. | !popoverKeepVisibleOnInput |

So, by default, without using a custom input slot, v-date-picker will have the following behavior when the input control has focus

| Action | Update w/ Value | formatInput | hidePopover | | ----- | ----- | ----- | ----- | | enter keyup (change event) | Input value | true | false | | esc keyup | Last value (input ignored) | true | true | | Any other keyup | Input value if update-on-input-keyup === true. None otherwise. | false | false |

Here is an example of passing the parameters with a custom slot.

<v-date-picker
  v-model='date'>
  <input
    slot-scope='{ inputValue, updateValue }'
    :value='inputValue'
    @change='updateValue(inputValue, { formatInput: true, hidePopover: false })'
    @keyup='updateValue(inputValue, { formatInput: false, hidePopover: false })' />
</v-date-picker>

defaults

• Added datePickerUpdateOnKeyup as default value for v-date-picker.update-on-keyup prop.