Datepicker

Dependencies

The ECL datepicker component uses the Pikaday under the hood. Through time, the library has been changing its internals in order to toggle its dependencies to moment.js. The published version of Pikaday provides an UMD which dynamically loads moment.js. ECL consuming this module which dynamically depends on moment.js makes the latter a dependency which the consumer of ECL will need to include in order to make use of all datepicker functionalities. For more information regarding which methods of moment.js trigger the dynamic inclusion, see this thread on github.

Please note that the published version of Pikaday is already included in the ECL.js bundle, and moment is handled as a global which is added as an external script. The internal bundler for ECL.js handles the moment variable specially in its minification/uglification process preserving its naming in order to avoid local (UMD) to global (IIEF) reference issues appearing during the production bundling of ECL. If you're building ECL separately on your side and you don't use the published pre-build version of ECL, you will most probably need to handle this special case in you bundler options or directly include the whole moment.js library instead of using globals.

API

Datepicker

Parameters

• element HTMLElement DOM element for component instantiation and scope

• options Object (optional, default {})

  • options.datepickerFormat String Format for dates
  • options.format (optional, default 'DD-MM-YYYY')
  • options.theme (optional, default 'ecl-datepicker-theme')
  • options.yearRange (optional, default 40)
  • options.reposition (optional, default false)
  • options.i18n (optional, default {previousMonth:'Previous Month',nextMonth:'Next Month',months:['January','February','March','April','May','June','July','August','September','October','November','December'],weekdays:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],weekdaysShort:['Sun','Mon','Tue','Wed','Thu','Fri','Sat']})
  • options.showDaysInNextAndPreviousMonths (optional, default true)
  • options.enableSelectionDaysInNextAndPreviousMonths (optional, default true)

init

Initialise component.

destroy

Destroy component.

autoInit

Parameters

• root HTMLElement DOM element for component instantiation and scope

• $1 Object (optional, default {})

  • $1.DATEPICKER (optional, default {})

Returns Datepicker An instance of Datepicker.

Setup

There are 2 ways to initialise the component.

Automatic

Add data-ecl-auto-init="Datepicker" attribute to component's input markup:

<input class="ecl-datepicker__field ecl-text-input ecl-text-input--s" data-ecl-auto-init="Datepicker" data-ecl-datepicker-toggle >
  ...
</div>

Use the ECL library's autoInit() (ECL.autoInit()) when your page is ready or other custom event you want to hook onto.

Manual

Get target element, create an instance and invoke init().

Given you have 1 element with an attribute data-ecl-datepicker-toggle on the page:

var elt = document.querySelector('[data-ecl-datepicker-toggle]');
var datepicker = new ECL.Datepicker(elt);
datepicker.init();