On the occasion of my current project for Icinga Web my task is to integrate flatpickr as date/time picker. Currently chrome is rendering our input date/time picker and from now on flatpickr is supposed to take over actions and configuration.
What is flatpickr?
Here is a shortcut of its feature overview:
- Range selections
- Ability to select multiple dates
- 51 locales
- 8 colorful themes (incl. dark and material)
- Numerous plugins
- Libraries available for React, Angular, Vue, Ember, and more
To prove how lightweight flatpickr is, we should take a look at the chart that speaks for itself.
How to use flatpickr
Once you retrieved the flatpickr instance you have various options for the configuration of the calendar. You can save the instance by assigning the result of a call to a variable.
Now it is possible to use properties like config which is the configuration object (defaults + user-specified options).
Different methods allows you to manually config your flatpickr instance just by accessing them by the variable.
Furthermore there are elements which hold the CSS attributes for customizing.
Step by Step
Flatpickr was already part of Icinga Web, but only in the reporting module. Now we’re taking care of it throughout Icinga Web.