Download the PHP package heimrichhannot/contao-flatpickr-bundle without Composer
On this page you can find all versions of the php package heimrichhannot/contao-flatpickr-bundle. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download heimrichhannot/contao-flatpickr-bundle
More information about heimrichhannot/contao-flatpickr-bundle
Files in heimrichhannot/contao-flatpickr-bundle
Package contao-flatpickr-bundle
Short Description A bundle to provide flatpickr support for contao.
License LGPL-3.0-or-later
Informations about the package contao-flatpickr-bundle
Contao Flatpickr Bundle
A bundle to provide frontend date- and timepicker using flatpickr.js.
Features
- show date- or timepicker in frontend forms
- dynamic language file loading using webpack dynamic import
- integrations:
- Contao form generator
- Filter Bundle
- supports Contao Encore Bundle
- supports Twig Templates Bundle
Usage
Install
Install with composer or contao manager and update the database afterwards
Form generator
Create a text field with input validation date, time or date and time and check 'Activate flatpickr'
Filter bundle
Create a filter element of type date, datetime, time or text and check 'Activate flatpickr'. You can also activate flatpickr and pass additional options from dca. See chapter dca configuration for more information. Flatpickr bundle checks the corresponding field dca configuration for filter elements.
DCA / Other frontend forms
Other frontend form systems may work (like formhybrid), if the form widgets are processed by the getAttributesFromDca hook. You need to activate flatpickr in your dca field configuration and activate flatpickr on page level (layout section). The configuration is inherited but can be overridden.
To actived flatpickr for a dca field, set field.eval.flatpickr.active
to true
.
You can customize the picker type with rgxp
eval option and pass additional flatpickr configuration:
Configuration
If flatpickr is activated for a field, it already works "out-of-the-box". Sometime additional customization are needed.
Flatpickr picker type
Three picker types are supported: date, time and datetime.
The types are automatically selected by setting the rgxp
value to one of 'date', 'time' or 'datim'
Custom configuration
The most config options from flatpickr should work with this bundle.
These options can be set from:
- DCA (works for filter bundle and other frontend forms): Add the configuration to
$field['eval']['flatpickr']['options']
- php event (work with all types): See developers chapter
- javascript event (work with all type): see developers chapter
Typical configuration options:
Option | Type | Default | Description |
---|---|---|---|
minDate | string | A formatted date/time constraining the date/time picker to a certain minimum date/time. | |
maxDate | string | A formatted date/time constraining the date/time picker to a certain maximum date/time. | |
time_24hr | bool | true | Disable to display a AM/PM selector instead of using 24 hr format. |
Following additional configuration are available from this bundle:
Option | Type | Default | Description |
---|---|---|---|
incrementArrows | array | Append and prepend arrow buttons to increment/decrement date/time by defined amount | |
incrementArrows.unit | string | Unit of time to increment/decrement by. Valid values: years, months, days, hours, minutes, seconds | |
incrementArrows.amount | int | The value of time to increment/decrement by. | |
prependPicker | bool | false | Prepend date picker button instead of append it. |
customBtnTpl | string | Bet custom template for flatpickr button. Type in template name (eg. btn_datepicker) |
Plugins
Flatpickr can be extended with plugins. Plugins supported by this bundle can by activated and configured from $field['eval']['flatpickr']['plugins']
.
monthSelectPlugin
monthSelectPlugin shows a month-only calendar view. Additional to the default configuration options of the plugin
there is an addition disabledMonths
option.
Example:
rangePlugin
rangePlugin add a range selection using two inputs. It can be enabled in form generator or from dca:
Developers
Events
Event | Description |
---|---|
huh.flatpickr.customize_flatpickr_options |
Adjust flatpickr options before they are parsed to frontend template |
JavaScript events
Event name | Data | Description |
---|---|---|
huh.flatpickr.prepare | options, target, lang | Customize flatpickr Element |
Update from version 1.x to 2.x
- add
flatpickr => [ active => true ]
to the eval array of the dca configuration - move the configuration in dca from
eval
toeval => [ flatpickr => [ options => [ option => value ] ] ]
All versions of contao-flatpickr-bundle with dependencies
contao/core-bundle Version ^4.9
heimrichhannot/contao-utils-bundle Version ^2.225
heimrichhannot/contao-twig-support-bundle Version ^0.2.16 || ^1.0
heimrichhannot/contao-encore-contracts Version ^1.0.2
symfony/event-dispatcher-contracts Version ^1.0 || ^2.0 || ^3.0