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


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

November 2020
S
M
T
W
T
F
S
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
8
9
10
11
12
<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
November 2020
S
M
T
W
T
F
S
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
8
9
10
11
12
<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.

November 2020
S
M
T
W
T
F
S
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
8
9
10
11
12
Date (ISO): 2020-11-25T03:34:41.927Z
<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.

November 2020
S
M
T
W
T
F
S
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
8
9
10
11
12
Date (ISO): 2020-11-25T03:35:02.967Z
<v-date-picker v-model="date" mode="dateTime" />

# Time Picker Only

Use time mode to select the time only.

Date (ISO): 2020-11-25T03:35:03.032Z
<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.

November 2020
S
M
T
W
T
F
S
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
8
9
10
11
12
<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
v1.0