PHPackages                             heimrichhannot/contao-flatpickr-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. heimrichhannot/contao-flatpickr-bundle

ActiveContao-bundle[Utility & Helpers](/categories/utility)

heimrichhannot/contao-flatpickr-bundle
======================================

A bundle to provide flatpickr support for contao.

2.9.5(1y ago)01.9kLGPL-3.0-or-laterPHPPHP ^7.4 || ^8.0

Since Dec 21Pushed 1y ago4 watchersCompare

[ Source](https://github.com/heimrichhannot/contao-flatpickr-bundle)[ Packagist](https://packagist.org/packages/heimrichhannot/contao-flatpickr-bundle)[ RSS](/packages/heimrichhannot-contao-flatpickr-bundle/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (5)Versions (45)Used By (0)

Contao Flatpickr Bundle
=======================

[](#contao-flatpickr-bundle)

A bundle to provide frontend date- and timepicker using [flatpickr.js](https://flatpickr.js.org).

Features
--------

[](#features)

- show date- or timepicker in frontend forms
- dynamic language file loading using webpack dynamic import
- integrations:
    - Contao form generator
    - [Filter Bundle](https://github.com/heimrichhannot/contao-filter-bundle)
- supports [Contao Encore Bundle](https://github.com/heimrichhannot/contao-encore-bundle)
- supports [Twig Templates Bundle](https://github.com/heimrichhannot/contao-twig-templates-bundle)

Usage
-----

[](#usage)

### Install

[](#install)

Install with composer or contao manager and update the database afterwards

```
composer require heimrichhannot/contao-flatpickr-bundle

```

### Form generator

[](#form-generator)

Create a text field with input validation date, time or date and time and check 'Activate flatpickr'

### Filter bundle

[](#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

[](#dca--other-frontend-forms)

Other frontend form systems may work (like [formhybrid](https://github.com/heimrichhannot/contao-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`.

```
$GLOBALS['TL_DCA']['tl_content']['fields']['date']['eval']['flatpickr']['active'] = true;
```

You can customize the picker type with `rgxp` eval option and pass additional flatpickr configuration:

```
$GLOBALS['TL_DCA']['tl_content']['fields']['date'] = [
    'eval' => [
        'rgxp' => 'datim' # one of 'date', 'time' or 'datim'
        'flatpickr' => [
            'active' => true,
            'options' => [], // Pass addtional flatpickr option, see configuration chapter
            'plugins' => [], // Use and configure flatpickr plugins, see configuration chapter
          ],
    ]
];
```

Configuration
-------------

[](#configuration)

If flatpickr is activated for a field, it already works "out-of-the-box". Sometime additional customization are needed.

### Flatpickr picker type

[](#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'

```
$field['eval']['rgxp'] = 'time'
```

### Custom configuration

[](#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:

OptionTypeDefaultDescriptionminDatestringA formatted date/time constraining the date/time picker to a certain minimum date/time.maxDatestringA formatted date/time constraining the date/time picker to a certain maximum date/time.time\_24hrbooltrueDisable to display a AM/PM selector instead of using 24 hr format.Following additional configuration are available from this bundle:

OptionTypeDefaultDescriptionincrementArrowsarrayAppend and prepend arrow buttons to increment/decrement date/time by defined amountincrementArrows.unitstringUnit of time to increment/decrement by. **Valid values:** years, months, days, hours, minutes, secondsincrementArrows.amountintThe value of time to increment/decrement by.prependPickerboolfalsePrepend date picker button instead of append it.customBtnTplstringBet custom template for flatpickr button. Type in template name (eg. btn\_datepicker)### Plugins

[](#plugins)

Flatpickr can be extended with plugins. Plugins supported by this bundle can by activated and configured from `$field['eval']['flatpickr']['plugins']`.

#### monthSelectPlugin

[](#monthselectplugin)

[monthSelectPlugin](https://flatpickr.js.org/plugins/#monthselectplugin) shows a month-only calendar view. Additional to the default configuration options of the plugin there is an addition `disabledMonths` option.

Example:

```
$GLOBALS['TL_DCA']['tl_content']['fields']['date']['eval']['flatpickr']['plugins']['monthSelectPlugin'] = [
    'shorthand' => true,
    'dateFormat' => "M Y",
    'disabledMonths' => [2021 => [0,3,6]]
];
```

#### rangePlugin

[](#rangeplugin)

[rangePlugin](https://flatpickr.js.org/plugins/#rangeplugin-beta) add a range selection using two inputs. It can be enabled in form generator or from dca:

```
$GLOBALS['TL_DCA']['tl_content']['fields']['startDate']['eval']['flatpickr']['plugins']['rangePlugin'] = [
    'input' => '#stopDate',
];
```

Developers
----------

[](#developers)

### Events

[](#events)

EventDescription`huh.flatpickr.customize_flatpickr_options`Adjust flatpickr options before they are parsed to frontend template#### JavaScript events

[](#javascript-events)

Event nameDataDescriptionhuh.flatpickr.prepareoptions, target, langCustomize flatpickr Element### Update from version 1.x to 2.x

[](#update-from-version-1x-to-2x)

- add `flatpickr => [ active => true ]` to the eval array of the dca configuration
- move the configuration in dca from `eval` to `eval => [ flatpickr => [ options => [ option => value ] ] ]`

###  Health Score

41

—

FairBetter than 89% of packages

Maintenance39

Infrequent updates — may be unmaintained

Popularity19

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity78

Established project with proven stability

 Bus Factor1

Top contributor holds 80.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~54 days

Recently: every ~101 days

Total

41

Last Release

523d ago

Major Versions

0.3.1 → 1.0.02019-11-13

1.1.0 → 2.0.02020-09-22

PHP version history (3 changes)0.1.0PHP ^7.1

2.6.0PHP ^7.4

2.7.0PHP ^7.4 || ^8.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/28ad3224d8727b622ebd229840eea6b9dbcb83eb0bd609e6ce65b614830ff538?d=identicon)[digitales@heimrich-hannot.de](/maintainers/digitales@heimrich-hannot.de)

---

Top Contributors

[![koertho](https://avatars.githubusercontent.com/u/12064642?v=4)](https://github.com/koertho "koertho (29 commits)")[![vvohh](https://avatars.githubusercontent.com/u/75325799?v=4)](https://github.com/vvohh "vvohh (3 commits)")[![AlexejKossmann](https://avatars.githubusercontent.com/u/32612134?v=4)](https://github.com/AlexejKossmann "AlexejKossmann (2 commits)")[![ericges](https://avatars.githubusercontent.com/u/25957923?v=4)](https://github.com/ericges "ericges (2 commits)")

### Embed Badge

![Health badge](/badges/heimrichhannot-contao-flatpickr-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/heimrichhannot-contao-flatpickr-bundle/health.svg)](https://phpackages.com/packages/heimrichhannot-contao-flatpickr-bundle)
```

###  Alternatives

[codefog/contao-haste

haste extension for Contao Open Source CMS

42650.8k139](/packages/codefog-contao-haste)[numero2/contao-storelocator

Contao Plugin for managing stores (or in common address data) and providing a frontend-search based on geo data

121.5k](/packages/numero2-contao-storelocator)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)