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

Enhancements

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

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.

v2.0.0-beta.0

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

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.

v0.9.6

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.

v0.9.5

Improvements

v-calendar

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

v0.9.4

Bug Fixes

v-date-picker

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

v0.9.3

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.

v0.9.2

Bug Fixes

v-calendar

• Fixes bug where detected locale getting overwritten by 'en-US' in some cases. Closes #101.

Improvements

v-calendar

• Adds support for importing individual components along with a method to setupCalendar. Closes #60. Closes #105.
• Includes full page object with update:frompage and update:topage events. Closes #120.

v0.9.1

Bug Fixes

v-calendar

• Removes global css
• Removes 'clever' container size detection