Flatpickr JS Widget for Yii2 ¶

1. Installation
2. Usage
3. Resources Information
4. Contributing
5. Credits
6. License

Renders a flatpickr Datepicker plugin.

Installation ¶

The preferred way to install this extension is through composer.

Either run

$ composer require cgsmith/yii2-flatpickr-widget:~1.1

or add

"cgsmith/yii2-flatpickr-widget": "~1.1"

to the require section of your application's composer.json file.

Usage ¶

The widget renders the flatpickr onto your form.

Example of use with a form
Use the widget by setting up its model and attribute.

<?php
use cgsmith\flatpickr\FlatpickrWidget;

// as a widget
?>

<?= FlatpickrWidget::widget([
    'model' => $model,
    'attribute' => 'date',
]);?>


<?php 
// additional config options for flatpickr

echo $form->field($model, 'date')->widget(
    FlatpickrWidget::widget([
    'model' => $model,
    'attribute' => 'date',
    'flatpickrConfig' => [ // This is passed as a JSON object to flatpickr
        'enableTime' => false,
        'dateFormat' => 'F j, Y H:i',
        'altInput' => true,
        'altFormat' => 'F j, Y',
        'locale' => 'ru', // optional
    ]
]);
?>

Example ¶

It's not a demo without a GIF

Example of use on Gridview You may need to adjust the filter to work with your form or search model but this is how it is working with a default Yii installation.

<?php
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            [
                'attribute' => 'created_at',
                'label' => 'Created At',
                'format' => 'datetime',
                'value' => 'created_at',
                'filter' => \cgsmith\flatpickr\FlatpickrWidget::widget(
                    [
                        'model' => $searchModel,
                        'attribute' => 'created_at',
                        'flatpickrConfig' => [
                                'enableTime' => false,
                                'dateFormat' => 'U',
                                'altInput' => true,
                                'altFormat' => 'F j, Y',
                        ],
                    ]
                )
            ],
            'updated_at:datetime',
            // other columns and settings for gridview
        ],
    ]);

Resources Information ¶

Please, check the flatpicker site documentation for further information about its configuration options.

Contributing ¶

Contributions are welcome!

Credits ¶

• Chris Smith
• All Contributors

License ¶

The BSD License (BSD). Please see License File for more information.