Dependencies
The ECL datepicker component uses the Pikaday under the hood. This library is not bundled in the ECL js anymore and needs to be loaded in the project before the ECL js. Additionally pikaday uses moment.js to handle the rendering of date formats and other things, although this is only an optional dependency and should be only loaded when the datepicker is initialised with a custom date format (default in ECL is DD-MM-YYYY).
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();