Forms

Datepicker

Dependencies

The ECL datepicker component uses the Duet js. This library is not bundled in the ECL js and needs to be loaded in the project before the ECL js.

Setup

There are 2 ways to initialise the component.

Automatic

Add data-ecl-auto-init="Datepicker" attribute to the wrapping div:

<div
  class="ecl-datepicker"
  data-ecl-auto-init="Datepicker"
  data-ecl-datepicker-toggle=""
>
  <duet-date-picker identifier="example-input-id-1" />
</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();

API