Skip to content

Flatpickr🔗

Installation🔗

Installation:

1
yarn add flatpickr

or

1
npm install flatpickr --save

Then:

1
2
3
4
5
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:

In your app.js:

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

Then in a form:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
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: December 20, 2024