V-Calendar

# 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 v2.0.0.

# Add @popperjs/core to dependencies

Popper.js (opens new window) 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

WARNING

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

Read more about using timezones.


# 2. Use footer scoped slot

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

September 2023
S
M
T
W
T
F
S
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
<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());
    },
  },
};

# 3. Attribute styles

Style objects may now be assigned to attributes via the following properties.

Attribute Type Properties
highlight style, contentStyle
dot style
bar style
September 2023
S
M
T
W
T
F
S
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
<v-calendar :attributes="attributes" />

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

# Date Picker Conversion Guide

  1. Use mode for new time picker
  2. Use is-range for date ranges
  3. Multiple dates deprecated
  4. Bind to date strings & numbers
  5. Set default times for date selections
  6. New time mask tokens
  7. Remove is-inline prop
  8. Update custom input slot bindings

# 1. Use mode for new time picker

The mode prop has been repurposed to enable date and/or time selection.

# Date Picker Only (default)

Use date mode to select the date only. This is the default mode and is not strictly required.

September 2023
S
M
T
W
T
F
S
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
Date (ISO): 2023-09-07T20:13:59.033Z
<v-date-picker v-model="date" mode="date" />

# Date & Time Picker

Use dateTime mode to allow for selecting dates and times using the new time picker. Times are displayed and modified using the local timezone unless specified via the timezone prop.

September 2023
S
M
T
W
T
F
S
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
Date (ISO): 2023-09-07T20:13:59.078Z
<v-date-picker v-model="date" mode="dateTime" />

# Time Picker Only

Use time mode to select the time only.

Date (ISO): 2023-09-07T20:14:04.805Z
<v-date-picker v-model="date" mode="time" />

# 2. Use is-range for date ranges

Since the mode prop no longer can be used to select date ranges, use the is-range: Boolean prop to bind to date ranges.

January 2020
S
M
T
W
T
F
S
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
Start (ISO):2020-01-06T00:00:00.000Z
End (ISO):2020-01-10T00:00:00.000Z
<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),
    }
  }
}

# 3. Multiple dates deprecated

Multiple date selection mode has been deprecated in favor of using a slot to provide more flexible user interface patterns.

Reference this example as an idea for a replacement option.


# 4. Bind to date strings & numbers

Previously, you could only bind to Javascript dates. Now it is possible to bind directly to string and number date values without manual conversion by setting the type and mask properties of the model-config prop.

Read more about binding to date strings and numbers.


# 5. Set default times for date selections

When the user selects a new date, it is now possible to auto-assign a default time value by setting the timeAdjust property of the model-config prop in HH:mm:ss format (use now for the current time of selection).

By default, time values are left unchanged from the original date value unless this property is assigned. Read more about setting default times.


# 6. New time mask tokens

New mask tokens have been added to support user time entry. When providing your own input element as a default slot, use the masks.input setting with the tokens below to allow the user to type in their own times.

<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',
      },
    };
  },
};
Token Output
Hour h 1 2 ... 11 12
hh 01 02 ... 11 12
H 0 1 ... 22 23
HH 00 01 ... 22 23
Minute m 0 1 ... 58 59
mm 00 01 ... 58 59
Second s 0 1 ... 58 59
ss 00 01 ... 58 59
AM/PM a am pm
A AM PM
Timezone X -07 -06 ... +06 +07
XX -0700 -0600 ... +0600 +0700
XXX -07:00 -06:00 ... +06:00 +07:00

# 7. Remove is-inline prop

v-date-picker now automatically displays pickers inline if no default slot is provided. This allows for the removal of the is-inline prop.

September 2023
S
M
T
W
T
F
S
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
<v-date-picker v-model="date">

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

# 8. Update custom input slot bindings

Any default slot provided to v-date-picker will display the picker as a popover. There are 2 primary updates needed for binding your own input elements.

# 1. inputProps deprecated

Since v-date-picker no longer provides its own input as a default slot, the inputProps prop has been deprecated. Instead, when you provide your own input slot, be sure to bind the input's value to the inputValue slot prop.

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

For date ranges, inputValue and inputEvents will provide their bindings within start and end sub-properties.

<v-date-picker v-model="range" is-range>
  <template v-slot="{ inputValue, inputEvents }">
    <div class="flex justify-center items-center">
      <input
        :value="inputValue.start"
        v-on="inputEvents.start"
        class="border px-2 py-1 w-32 rounded focus:outline-none focus:border-indigo-300"
      />
      <svg
        class="w-4 h-4 mx-2"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M14 5l7 7m0 0l-7 7m7-7H3"
        />
      </svg>
      <input
        :value="inputValue.end"
        v-on="inputEvents.end"
        class="border px-2 py-1 w-32 rounded focus:outline-none focus:border-indigo-300"
      />
    </div>
  </template>
</v-date-picker>

export default {
  data() {
    return {
      range: {
        start: new Date(2020, 9, 12),
        end: new Date(2020, 9, 16),
      },
    };
  },
};

Read more abount providing custom input elements.

# v2.0.1

# Enhancements

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

# v2.0.2

# 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

# v2.1.0

# Enhancements

  • Fix aria-label for calendar days
  • Adds trim-weeks prop for both calendars and date pickers
  • Adds force options 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

# v2.1.1

  • Fix explicit line-height for title

# v2.1.2

# Bug Fixes

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

# v2.1.3

# 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 date null 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

# v2.1.4

# 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

# v2.1.5

# Bug Fixes

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

# v2.1.6

# Bug Fixes

  • Fix time parse for browsers < Safari 14

# v2.2.0

# 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 Z, ZZ, ZZZ and ZZZZ mask tokens
  • Add unit tests for DatePicker and TimePicker with string dates

# v2.2.1

# 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. 🎉

# v2.2.2

# Improvements

  • Update lodash to fix security vulnerability

# v2.2.3

# Bug Fixes

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

# v2.2.4

# 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

# v2.3.0

# 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
}

# v2.3.1

# Bug Fixes

  • Bump dependency versions

# v2.3.2

# Bug Fixes

  • Deep watch attributes for date changes

# v2.3.3

# Bug Fixes

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

# Improvements

  • Remove custom click detection handlers for Mobile Safari

# v2.3.4

# Bug Fixes

  • Fix event removal in date picker

# v2.4.0

# 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

# v2.4.1

# 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
v1.0 →