Vue Accessible Datepicker

⚠️WARNING: vue-accessible-datepicker is at pre-alpha stage of development so there may be bugs and various changes made. ⚠️

Submit issues and feature requests here.

---

Table of Contents

• About
• Installation
• Usage
• Props
• Events
• Roadmap
• Development
• License

---

About

VueAccessibleDatepicker is a fully customisable, AA accessible datepicker built in Vue, for Vue projects.

WCAG 2.1 AA Accessible - work in progress - currently in pre-alpha stages.

If you're curious, here's some information on how to meet WCAG 2.1 AA Accessibility:

https://www.w3.org/WAI/WCAG21/quickref/?versions=2.1&currentsidebar=%23col_customize&showtechniques=144%2C145&levels=a%2Caaa#hiddensc

To find all of the functionality that a date-picker should have, VueAccessibleDatepicker is based off of this date picker from W3's website.

---

Installation

npm install vue-accessible-datepicker

or if you prefer yarn

yarn add vue-accessible-datepicker

---

Usage

Global

You may install the date-picker globally:

import Vue from 'vue';
import VueAccessibleDatepicker from 'vue-accessible-datepicker';

Vue.use(VueAccessibleDatepicker);

This will make <vue-accessible-datepicker> available to all components within your Vue app.

Local

Include the datepicker directly into your component using import:

import VueAccessibleDatepicker from 'vue-accessible-datepicker';

export default {
  ...
  components: {
    VueAccessibleDatepicker,
  }
  ...
};

---

Props

Prop	Type	Default	Description
calendarIcon	String	Default Icon	Icon for the button to open the date-picker. A default icon appears if none is provided.
customClasses	Object	{}	Provide classes to override the default styles. See customClasses for more info.
dateFormat	String	"MM/DD/YYYY"	The format of the date to use for the input and calendar. See dateFormat for more info.
initialValue	String	null	Provide an initial value to the input if needed.
inputPlaceholder	String	null	Placeholder for the input.
label	String	"Date (mm/dd/yyyy):"	"(mm/dd/yyyy)" changes depending on the dateFormat prop.
minDate	Date	null	Every date before the minDate is disabled.
maxDate	Date	null	Every date after the maxDate is disabled.
navigateMonthIcons	Object	{}	Provide custom icons for the previous and next navigation arrows. See navigateMonthIcons for more info
required	Boolean	false	Boolean for if the input is required for the form it is used in.
name	String	null	Name for the input field

customClasses

Provide custom classes in an object via the prop customClasses.

The aim of this prop is to make the calendar as customisable as possible.

Available classes:

• Classes for the wrapper container with input and button:
  • wrapper
  • inputContainer
  • inputWrapper
  • inputLabel
  • inputError
  • input
  • toggleButton
  • toggleButtonIcon
• Classes for the datepicker:
  • datepickerWrapper
  • datepickerHeaderWrapper
  • datepickerChangeMonthButton - for both next and previous buttons.
  • datepickerChangeMonthButtonDisabled - Disabled state of datepickerChangeMonthButton element.
  • datepickerBackArrow - for the icon itself.
  • datepickerHeader
  • datepickerNextArrow - for the icon itself.
  • datepickerContent - the wrapper for the table element itself. Houses the calendar.
  • datepickerWeekdaysWrapper - On the <thead> element. Wraps the header part with the list of weekdays.
  • datepickerWeekdaysRowWrapper - On the <tr> element. Wraps the list of weekdays.
  • datepickerWeekday - On each <th> element (each weekday).
  • datepickerWeeks - On the <tbody> element.
  • datepickerWeek - On the <tr> element, wraps each week.
  • datepickerDay - On the <td> element, wraps each day button.
  • datepickerDayButtonSelected - Selected state of datepickerDay td element.
  • datepickerDayButtonDisabled - Disabled state of datepickerDay td element.
  • datepickerDayButton - On the <button> in each td.
  • datepickerFillerDate - On each blank <td> to make each month start on the correct day of the week.
  • datepickerFooter - Footer wrapper with the close button.
  • datepickerFooterButton

Code example:

<vue-accessible-datepicker
  :custom-classes="{
    wrapper: 'custom-datepicker-wrapper-class',
    datepickerChangeMonthButton: 'custom-datepicker-change-month-class',
    toggleButtonIcon: 'toggle-me-class',
  }"
/>

dateFormat

The formatting is taken from MomentJS.

See the docs here https://momentjs.com/docs/#/displaying/format/.

The formats accepted are:

• MM/DD/YYYY
• MM-DD-YYYY
• DD/MM/YYYY
• DD-MM-YYYY
• YYYY/MM/DD
• YYYY-MM-DD

If dateFormat is not provided, it defaults to MM/DD/YYYY.

If you type a different format of date than the dateFormat specified, there will be an error in the console.

Code example:

<vue-accessible-datepicker date-format="DD-MM-YYYY" />

---

navigateMonthIcons

Provide src of img or svgs through the navigateMonthIcons prop as an object with next and previous as the keys.

Code example:

<vue-accessible-datepicker
  :navigate-month-icons="{
    next: '/img/next-arrow.svg',
    previous: '/img/previous-arrow.svg',
  }"
/>

---

Events

• Input - On blur - the component emits "input-blur" with the value of the input.
• Input - On focus - the component emits "input-focus" with the value of the input.
• Input - On change - the component emits "input-change" with the value of the input.
• Date selected via date-picker - component emits "date-selected" with the selected date.

---

Slot

There is a single slot with the classname of v-datepicker__input-error for any form error messages you want to inject and style.

---

Example

<vue-accessible-datepicker
  name="start-date"
  required
  date-format="DD-MM-YYYY"
  :custom-classes="{
    wrapper: 'v-wrapper',
    input: 'v-input'
  }"
/>

Roadmap

• Tests

Development

yarn install

yarn dev

License

This project is licensed under MIT - see LICENSE.md for details.

---

© 2019 Hex Digital.

hexdigital.com