Pulsar Date Picker

An accessible single date picker built on the jQuery UI date picker.

JavaScript

You will need to initialise the Date Picker from a file within your Browserify bundle.

const datePicker = require('pulsar-date-picker');

$(function () {
    datePicker.init($html);
});

Styles

Include the Date Picker styles into your existing Sass bundle.

@import '/path/to/pulsar-date-picker/src/scss/styles.scss

Usage

You'll need a trigger button for the Date Picker and your date input to have the following data attributes: data-pulsar-datepicker="true" and data-pulsar-datepicker-trigger="ID-of-trigger-button".

For example:

<label for="example">Pick a date</label>
<input data-pulsar-datepicker="true" id="example" data-pulsar-datepicker-trigger="trigger-button" type="text">
<button type="button" id="trigger-button">Show calendar</button>

Date formats

The date picker defaults to DD/MM/YYYY. For the US date format MM/DD/YYYY add data-pulsar-datepicker-format="US" to the date input. Alternatively for a reverse format YYYY/MM/DD add data-pulsar-datepicker-format="reverse".

It's also possible to update an alternative field with a different date format by using data-pulsar-datepicker-altfield="ID-of-alternative-field" and data-pulsar-datepicker-altformat="yy-mm-dd". See the jQuery UI datepicker docs for more examples of supported date formats.

Behaviour

The Date Picker enhances the default jQuery UI date picker with the following:

Keyboard accessibility

• ESC closes the date picker
• Enter and SPACE can be pressed to select a date
• TAB and SHIFT + TAB can be used to cycle through the date picker controls
• ARROW KEYS can be used to navigate the displayed dates or navigate to a previous/future week or month
• PAGE UP goes to the previous month
• PAGE DOWN goes to the next month
• HOME goes to the first date of the month
• END goes to the last date of the month
• Previous/Next controls can be focussed and activated via keyboard
• Keyboard focus is trapped within the picker to avoid AT users leaving the picker by accident

Accessible labels

• Dates have accessible labels, for example: aria-label="7 May 2020 Thursday"
• Previous / Next month controls have accessible labels, for example: Next Month, June 2020 and Previous Month, April 2020.

Misc

• A placeholder matching the date format is added to the date input
• autocomplete is disabled on the date input
• Various attribute changes such as removing unnessisary title attributes and addition of role="button" on certain links (such as dates).

Demo

Within your local checkout, run npm install, grunt and then open demo/index.html to view a simple demo.

Tests

Run the test suite to check expected functionality.

npm test

Generate a code coverage report, which can be viewed by opening /coverage/lcov-report/index.html

npm run coverage