How to add a date range picker to filter for dates on a GridView for Yii2 - See more at: http://www.2amigos.us/blog/how-to-add-a-date-range-picker-to-filter-for-dates-on-a-gridview-for-yii2#sthash.pf7

Filtering the data we have on our GridView by dates are sometimes very important. On this article I am going to show you how easy is to add a date range filter to your Yii2 GridViews.
The DateRange picker plugin
For this tutorial we are going to use jino5577/yii2-date-range-picker. One thing that I highly recommend to any developer is that, whenever he/she can, tests should be provided to increase the trust of other developers to your open source project. I know that sometimes that is practically impossible due to the small we have (I include my self here) but if we can, we should do it. Nevertheless, this is a widget, and for a widget, there is not much to do and this one have never gave me any issues so far. Enough talking, lets include the library in our composer:
1
2
./composer require jino5577/yii2-date-range-picker "*"
In case you are wondering why I am using ./composer command instead of php composer.phar is because I have composer installed globally.
The ModelSearch class
Now, lets imagine that your model User has a created_at attribute and we want to add a date range filtering on that value. In order to do that, we need first to add a public variable on its UserSearch class (the class used for filtering), an attribute that will hold the range values to filter our data with:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
class UserSearch extends User
{
    // This attribute will hold the values to filter our database data
    public $created_at_range; 

    // ....
    public function rules()
    {
        return ArrayHelper::merge(
            [
                [['created_at_range'], 'safe'] // add a rule to collect the values
            ],
            parent::rules()
            );
    }

    public function search($params)
    {
        $query = $this->finder->getUserQuery();
        $dataProvider = new ActiveDataProvider(
            [
                'query' => $query,
            ]);
        if (!($this->load($params) && $this->validate())) {
            return $dataProvider;
        }

        // do we have values? if so, add a filter to our query
        if(!empty($this->created_at_range) && strpos($this->created_at_range, '-') !== false) {
            list($start_date, $end_date) = explode(' - ', $this->created_at_range);
            $query->andFilterWhere(['between', 'user.created_at', strtotime($start_date), strtotime($end_date)]);
        }
        // ... more filters here ...

        return $dataProvider
    }
}
That's all we have to do to be able to search by a range in our UserSearch class. Now, the next step is to configure the GridView column to add our date range picker.
Configuring GridView column
The last part is even easier than before, we simply configure the column of our GridView as follows:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
use jino5577\daterangepicker\DateRangePicker; // add widget
/* @var $searchModel common\models\UserSearch */
// ... lots of code here
<?= GridView::widget([
    // ... more code here
    'columns' => [
        // ... other columns
        [
            // the attribute
            'attribute' => 'created_at',
            // format the value
            'value' => function ($model) {
                if (extension_loaded('intl')) {
                    return Yii::t('app', '{0, date, MMMM dd, YYYY HH:mm}', [$model->created_at]);
                } else {
                    return date('Y-m-d G:i:s', $model->created_at);
                }
            },
            // some styling?
            'headerOptions' => [
                'class' => 'col-md-2'
            ],
            // here we render the widget
            'filter' => DateRangePicker::widget([
                'model' => $searchModel,
                'attribute' => 'created_at_range',
                'pluginOptions' => [
                'format' => 'd-m-Y',
                'autoUpdateInput' => false
            ]
            ])
        ],
    ]
]); ?>
Done, with three simple steps we have now a beautiful date range picker filtering our data by a range.

- See more at: http://www.2amigos.us/blog/how-to-add-a-date-range-picker-to-filter-for-dates-on-a-gridview-for-yii2#sthash.pf77rP6O.dpuf