Why and how to use this component
Users need a way to scan quickly a date related to an event.
This component appears when you need to enter a date.
By clicking in the date field a pop-up displays a calendar. It allows the user to select a time or a date value instead of typing it. This greatly reduces the likelihood of mistakes.
When to use this component
- on the filter component, date field
Do not use this component
- outside of the filter component
Pikaday works as a global, a possible way to include it in your site would be:
If you're using a bundler for your assets (like
rollup), please keep in mind the list of known issues regarding how
Pikaday handles dependencies to
moment.js which you might not need.
Then, add an instantiation script similar to this:
var picker =field: documentfirstDay: 1maxDate: 2020 12 31theme: 'ecl-pika-theme'yearRange: 2000 2020;
The most important setting is the
theme: 'ecl-pika-theme' which will add the necessary styling of ECL on datepickers.
Please make sure you detach other libraries from the inputs of type dates like jQuery or its UI datepicker, which will conflict when having several behaviors attached to same elements.