What the heck happened to the rest of the UIF documentation?

All the CSS-only components have been moved across to the Storybook version of our UIF docs.

The jQuery dependent components are considered legacy, and while still currently available, are not going to be actively developed upon any longer. Also, it's a schlep trying to get jQuery to work within webpack/storybook, so they can stay here.

Please consider using CSS-only components for maximum ongoing happiness. 💖

Datepicker
ready

Introduction

The datepicker hooks onto a input[type='date|text'] element, and requires a data-js=datepicker attribute to initialise.

Alternatively, for a non-JS implementation, a input[type='date'] element will suffice, with optional min, max, and value attributes. How this datepicker presents will vary from browser to browser.

Inputs can be predefined on page load by having the value attribute populated (using the ISO wire format YYY-MM-DD).
NOTE: in the case of date range and multiple date, due to their specific non-date format values, must be prepopulated from a data-default-date attribute instead.

The JS datepicker has a dependency on flatpickr. Remember to include a reference to external/flatpickr.min.js as well as the standard modules/jquery.pfDatepicker.

By default, the standard datepicker will present as a Native datepicker widget on handheld devices (unless overridden manually; see [data-datepicker-force] attribute below). However, in the case that a range or multiple date selector is used, the JS implemented datepicker will be used instead.

Browser compatibility

The datepicker leverages Object.assign, which is not supported natively by Internet Explorer 11 and lower. If support for these browsers is required, include a reference to polyfills/object.assign.js

Examples

Non-JS datepicker

<label for="basicNoJS">Basic No Javascript</label>
    <input type="date" id="basicNoJS" class="input-text input-text--box">

Basic datepicker

<label for="basic">Basic With JS</label>
    <input type="date" id="basic" data-js="datepicker" class="input-text input-text--box">

non-JS datepicker with predefined value

<label for="predefined-basicNoJS">Basic No JS</label>
    <input type="date" id="predefined-basicNoJS"  value="2020-06-01" class="input-text input-text--box">

Basic datepicker with predefined value

<label for="predefined-basic">Basic With JS</label>
    <input type="date" id="predefined-basic"  value="2020-06-01" data-js="datepicker" class="input-text input-text--box">

Non-JS Minimum date

<label for="minDateNoJS">Minimum date No JS</label>
    <input type="date" id="minDateNoJS"  min="2020-06-01" class="input-text input-text--box">

Minimum date

<label for="minDate">Minimum date With JS</label>
    <input type="date" id="minDate"  min="2020-06-01" data-js="datepicker" class="input-text input-text--box">

Non-JS Maximum date

<label for="maxDateNoJS">Maximum date No JS</label>
    <input type="date" id="maxDateNoJS"  max="2020-06-01" class="input-text input-text--box">

Maximum date

<label for="maxDate">Maximum date With JS</label>
    <input type="date" id="maxDate"  max="2020-06-01" data-js="datepicker" class="input-text input-text--box">

Highlight a specific day of the week

<label for="highlightDay">Highlight Fridays</label>
    <input type="date" id="highlightDay" data-js="datepicker" data-datepicker-highlight-day="5" class="input-text input-text--box">

Dependencies

  • src/scripts/external/flatpickr.min.js
  • src/scripts/modules/jquery.pfDatepicker.js
  • src/scripts/polyfills/object.assign.js
  • src/styles/base/*.scss
  • src/styles/components/blocks/_datepicker.scss
  • src/styles/external/flatpickr.scss

Usage

Class/JavaScript Hook Description Required?
[data-js=datepicker] Placed directly on the input[type='date'] or input[type=text] that will use the datapicker component. Optional
[min='YYYY-MM-DD'] Will determine the minimum possible date that can be specified within the input Optional
[max='YYYY-MM-DD'] Will determine the maximum possible date that can be specified within the input Optional
[value] Predefines a value in the text field. Optional
[data-default-date] Acts as a data-attribute value proxy - mainly to assist with prepopulating the multiple or range datepickers, but can be used with other as a value alternative. Optional. Requires the data-js='datepicker' attribute to be added.
[data-datepicker-force] On touchscreen devices, the datepicker will attempt to use the native datepicker widget (where possible). This will force the JS implementation to be used. Optional. Requires the data-js='datepicker' attribute to be added.
[data-datepicker-highlight-day='0-6'] Will visually highlight the day of the week specified.
0 = Sunday, 1 = Monday etc. NOTE: This mode will force mobile devices to use the JS display rather than native UI.		 Optional. Requires the data-js='datepicker' attribute to be added.