Flatpickr🔗

Installation🔗

Installation:

1	`yarn add flatpickr`

or

1	`npm install flatpickr --save`

Then:

import flatpickr from 'flatpickr'
import { French as locale } from 'flatpickr/dist/l10n/fr.js'
import 'flatpickr/dist/flatpickr.css'

flatpickr(document.getElementById('#flatpickr'), { locale });

For more options, see documentation

Symfony🔗

You will need:

FlatpickrType based on Symfony's DateTimeType
flatpickr.js

In your app.js:

1 2	`import initFlatpickr from './flatpickr' initFlatpickr(document)`

Then in a form:

class FoobarType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('date', FlatpickrType::class)
            ->add('datetime', FlatpickrType::class, ['enable_time' => true])
        ;
    }
}

Last update: October 14, 2025