v2.0.0

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());
    },
  },
};

3. Attribute styles

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

Attribute Type	Properties
highlight	style, contentStyle
dot	style
bar	style

<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. Remove input-props prop

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.

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

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

Time Picker Only

Use time mode to select the time only.

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

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

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.

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.

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.

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

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

Any default slot provided will display the picker as a popover.

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

8. Remove input-props prop

Since default slots are no longer provided, the input-props prop has been deprecated. When providing your own input elements in a default slot, bind to the input-value prop provided by the slot.