https://github.com/hex-digital/vue-accessible-datepicker
ADA AA Accessible datepicker.
https://github.com/hex-digital/vue-accessible-datepicker
Last synced: 5 months ago
JSON representation
ADA AA Accessible datepicker.
- Host: GitHub
- URL: https://github.com/hex-digital/vue-accessible-datepicker
- Owner: hex-digital
- License: mit
- Created: 2019-11-15T10:48:50.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-02-19T16:59:23.000Z (over 6 years ago)
- Last Synced: 2025-10-20T13:16:32.184Z (9 months ago)
- Language: Vue
- Size: 300 KB
- Stars: 6
- Watchers: 0
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/hex-digital/vue-accessible-datepicker/issues)**.
---
## **Table of Contents**
- [About](#about)
- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [Events](#Events)
- [Roadmap](#roadmap)
- [Development](#development)
- [License](#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¤tsidebar=%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](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) from [W3's website](https://www.w3.org/TR/wai-aria-practices/).
---
### **Installation**
``` bash
npm install vue-accessible-datepicker
```
or if you prefer yarn
``` bash
yarn add vue-accessible-datepicker
```
---
### **Usage**
#### **Global**
You may install the date-picker globally:
``` js
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:
``` js
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](#customClasses) for more info. |
| dateFormat | String | "MM/DD/YYYY" | The format of the date to use for the input and calendar. See [dateFormat](#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](#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 `` element. Wraps the header part with the list of weekdays.
- `datepickerWeekdaysRowWrapper` - On the `` element. Wraps the list of weekdays.
- `datepickerWeekday` - On each `` element (each weekday).
- `datepickerWeeks` - On the `` element.
- `datepickerWeek` - On the `` element, wraps each week.
- `datepickerDay` - On the `` element, wraps each day button.
- `datepickerDayButtonSelected` - Selected state of `datepickerDay` `td` element.
- `datepickerDayButtonDisabled` - Disabled state of `datepickerDay` `td` element.
- `datepickerDayButton` - On the `` in each `td`.
- `datepickerFillerDate` - On each blank `` to make each month start on the correct day of the week.
- `datepickerFooter` - Footer wrapper with the close button.
- `datepickerFooterButton`
**Code example:**
```html
```
##### `dateFormat`
The formatting is taken from [MomentJS](https://momentjs.com).
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:**
```html
```
---
##### `navigateMonthIcons`
Provide src of img or svgs through the `navigateMonthIcons` prop as an object with `next` and `previous` as the keys.
**Code example:**
```html
```
---
### **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**
```html
```
### **Roadmap**
- Tests
### **Development**
`yarn install`
`yarn dev`
## **License**
This project is licensed under MIT - see [LICENSE.md](https://github.com/hex-digital/vue-accessible-datepicker/blob/master/LICENSE) for details.
---
© 2019 Hex Digital.
[hexdigital.com](https://hexdigital.com/)