ADA AA Accessible datepicker.

Overview

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

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

Screenshot of datepicker

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

Issues
Releases(v0.1.15)
Owner
Hex Digital
We are a 360° digital engagement agency. Creating lasting connections between audiences and brands.
Hex Digital
This datepicker is a fully customisable Vue(v2.1.6) version of the material-ui datepicker

vue-material-datepicker This datepicker is a fully customisable Vue(v2.1.6) version of the material-ui datepicker that fit all your projects. See belo

Bastien Granger 54 Dec 13, 2021
[Deprecated] calendar and datepicker component with material design for Vue.js

vue-datepicker calendar and datepicker component with material design for Vue.js Demo The demo page is HERE. Requirements Vue.js ^1.0.0 & ^2.0.0 momen

Awe 704 Dec 9, 2021
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

Datepicker A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dates Transl

Charlie Kassel 2.5k Jan 19, 2022
Jalaali calendar and datepicker for vue.js 2

vue-jalaali-datepicker Jalaali calendar and datepicker for vue.js 2 Demo Requirements Vue.js ^2.0.0 moment-jalaali ^0.6.0 Installation npm $ npm insta

Peyman 15 Aug 29, 2021
A vue component that provides datepicker for persian developers

vue persian datepicker This is a Jalali date picker component for Vue. این برنامه یک کامپوننت انتخاب تاریخ جلالی می باشد. Demo You can see a demo and

Dyon Software Development Group 100 Dec 14, 2021
A Beautiful Datepicker Component For Vue2

vue-datepicker-local A Beautiful Datepicker Component For Vue2 Lightweight (less than 5kb minified and gzipped) Only dependencies Vue Beautiful! Demo

飞越 294 Jul 17, 2021
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped

DraggableCal A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Available Languages Dev & Build Licence Thanks Demo To view a demo

Tom 82 Jan 5, 2022
datepicker component for Vue 2.x

vue-date-picker datepicker component for Vue 2.x Screenshot Instllation $ npm install vue-date-picker --save Usage <template> <div class="demo">

8788 100 Dec 13, 2021
A clean datepicker made with VueJs

vue-datepicker A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Props Events Date Formatting Translations Best Practices Demo To

Mathieu Stanowski 150 Jan 11, 2022
Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js.

Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js. Documentation For full documentation, visit lite

Ken 199 Jan 20, 2022
A simple datepicker component for vue3.0

A simple datepicker component for vue3.0

Lin Masahiro 29 Dec 7, 2021
awesome, zero dependency, performant Vue datepicker component

awesome, zero dependency, performant Vue datepicker component

mohammad S. 31 Jan 11, 2022
Vue Datepicker Component

Datepicker Component For Vue

Hatice Edis 373 Jan 7, 2022
Datepicker component for Vue 3

The most complete date picker solution for Vue 3

null 97 Jan 20, 2022
Datepicker component for vue.js built with Tailwind CSS, and the day.js date library.

Datepicker component for vue.js build with Tailwind CSS & dayjs date library

Ken 183 Dec 15, 2021
Simple datepicker component for Vue 3

Simple datepicker component for Vue 3

Ilya Borovitinov 78 Jan 14, 2022
A vue2 range datepicker

A simple range datepicker based on Vue2

HC 3 Sep 13, 2021
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.

Vue 3 Datepicker A datepicker Vue component. Compatible with Vue 3 Only Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dat

shubhadip 19 Jan 16, 2022
Vue draggable datepicker component

DraggableCal A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Available Languages Dev & Build Licence Thanks Demo To view a demo

null 0 Jan 20, 2022