Date

WIP: This component is still looking for more testers and some feedback.

A date picker with accessibility baked in.

Features:

• Manages ARIA roles, labels, and attributes.
• Manages focus ring and traps focus within calendar.
• Provides keyboard navigation support (see below).
• Supports passing in min and max date props.

Keyboard navigation:

Key	Action
Enter/Spacebar	Select the currently focused date and hide the calendar.
Right	Move to next day.
Left	Move to previous day.
Down	Move to next week.
Up	Move to previous week.
Home	Move to beginning of week.
End	Move to beginning of week.
PageUp	Move to previous month.
Shift + PageUp	Move to previous year.
PageDown	Move to next month.
Shift + PageDown	Move to next year.
Esc	Hide the calendar without selecting a date.

NOTE: I would probably recommend using the browser's built in date picker (<input type="date">) because it's simpler, consistent across website, and it's less code. However, it does not support custom styling.

Source

Installation

Globally:

// main.js
import Vue from "vue"
import { VDate } from "vuetensils/src/components"

Vue.component("VDate", VDate)

Locally:

<script>
// SomeComponent.vue
import { VDate } from "vuetensils/src/components"

export default {
  components: {
    VDate,
  },
  // ...
}
</script>

Default Example

v-model

Custom Toggle

Min and Max