Datepicker

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.showDaysInNextAndPreviousMonths (optional, default true)
  • options.enableSelectionDaysInNextAndPreviousMonths (optional, default true)

init

Initialise 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();