Yii : How to add datepicker in order to filter gridview

Question

Here is my codes in order to show some relation tables data in the controller

    $query = 'SELECT `Transaction`.`id`, SUM(`Transaction`.`amount`) AS all_amount, `App`.`packageId` as packageId, `title` FROM `Transaction` INNER JOIN `App` ON `Transaction`.`fk_app_id` = `App`.`id` GROUP BY `App`.`packageId`';
$model = \Yii::$app->db->createCommand($query)->queryAll();
    $provider = new ArrayDataProvider([
                'allModels' => $model,
               'sort' => [
                    'attributes' => ['id', 'all_amount', 'title'],
                ],
                'pagination' => [
                    'pageSize' => 20,
                ],

            ]);

and it is view code

echo GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        'id',
        'packageId',
        'all_amount',
        'title'


    ],

]);

I want to add a date picker to view and use it in order to filter GridView
I am new in yii2 please advise me

Answer 1

first of all install any datepicker widget i.e 2amigos date picker

use dosamigos\datepicker\DatePicker;

in your index grid

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
    'columns' => [
    'id',
        'packageId',
        'all_amount',
        'title',
    [
                    'attribute'=>'attribute_name',
                    'value' =>'attribute_name',

                    'filter'=>DatePicker::widget([
            'model' => $searchModel,
            'attribute'=>'attribute_name',
                'clientOptions' => [
                    'autoclose' => true,
                    'format' => 'yyyy=M-dd'
                ]
        ])       
],
    ],
        ]); 

        ?>

In your controller in actionindex()

public function actionIndex()
    {
        $searchModel = new <model name>Search();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
        ]);
    }