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