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

# 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

Last Updated: 10/17/2020, 2:28:03 PM