Datepicker
ready

Introduction

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

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 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

Basic datepicker

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

Basic datepicker with predefined value

<label for="predefined-basic">Basic</label>
    <input type="date" id="predefined-basic"  value="2017-02-01" data-js="datepicker" class="input-text input-text--box">

Minimum date

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

Maximum date

<label for="maxDate">Maximum date</label>
    <input type="date" id="maxDate"  max="2017-03-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">

Date range

This component is now deprecated and will be removed inv2.0.0.

<label for="dateRange">Date range</label>
    <input type="date" id="dateRange" data-js="datepicker" data-datepicker-range class="input-text input-text--box">

Date range with predefined value

This component is now deprecated and will be removed inv2.0.0.

<label for="dateRange">Date range</label>
    <input type="date" id="dateRange"  value="2017-02-01" data-js="datepicker" data-datepicker-range data-default-date="2017-02-01 to 2017-02-04" class="input-text input-text--box">

Multiple dates

This component is now deprecated and will be removed inv2.0.0.

<label for="multipleDates">Multiple dates</label>
    <input type="date" id="multipleDates" data-js="datepicker" data-datepicker-multiple class="input-text input-text--box">

Multiple dates with predefined value

This component is now deprecated and will be removed inv2.0.0.

<label for="predefined-multipleDates">Multiple dates with predefined value</label>
    <input type="date" id="predefined-multipleDates"  value="2017-02-01" data-js="datepicker" data-datepicker-multiple data-default-date="2017-02-01; 2017-02-04; 2017-02-06;" 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. Required.
[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
[data-datepicker-range] Will convert the datepicker into a date range selector. Will return values in the format YYYY-MM-DD to YYYY-MM-DD. NOTE: This mode will force mobile devices to use the JS display rather than native UI. Optional
[data-datepicker-multiple] Will convert the datepicker into a multiple date selector. Will return values in the format YYYY-MM-DD;YYYY-MM-DD;.... NOTE: This mode will force mobile devices to use the JS display rather than native UI. 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. Required if the UI requires either a range or multiple datepicker value to be prepopulated.
[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
[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