using kartik date range picker for filtering in gridview

Hi I am trying to use the Kartik Date Range picker for filter in gridview.

I have a column date_time field as discharge_date, the widget is showing fine in the gridview but the filtering is not working at all.

This is my code in the Gridview:

[

                'attribute'=>'discharge_date',

                'value'=>'discharge_date',                

                'filterType' => GridView::FILTER_DATE_RANGE,

                'filterWidgetOptions' =>([

                'model'=>$model,

                'attribute'=>'discharge_date',

                'presetDropdown'=>TRUE,                

                'convertFormat'=>true,                

                'pluginOptions'=>[                                          

                    'format'=>'Y-m-d',

                    'opens'=>'left'

                ]

            ])


            ],

Any idea, where I am going wrong.

Thanks.

I have achieved that with the below setup, based on ideas from this link : demos.krajee.com/date-range (check a comment below from Claudio).

[

    'attribute' => 'date',


    'format'=>'date',


    'filterType'=> \kartik\grid\GridView::FILTER_DATE_RANGE,


    'filterWidgetOptions' => [


    'presetDropdown' => true,


    'pluginOptions' => [


    'format' => 'YYYY-MM-DD',


    'separator' => ' TO ',


    'opens'=>'left',


    ] ,


    'pluginEvents' => [


    "apply.daterangepicker" => "function() { aplicarDateRangeFilter('date') }",


    ]    


    ],


    ]

It doesn’t work.

I have gone through the link, but it looks like it uses non English language and some additional code then ur suggestion, which is little difficult to grasp how to adapt that code.

Can you please provide some more detail how you have implemented it.

Thanks.

I made changes to both my index view and search model: Am using Kartik’s select 2 widget for the dropdown filter and the daterange filter for the date filter.

this is how my search model looks like:

public function search($params)

{


    $query = Contributions::find();


    $query->joinWith(['member']);


    $dataProvider = new ActiveDataProvider([


        'query' => $query,


    ]);


    $this->load($params);


    if (!$this->validate()) {


        // uncomment the following line if you do not want to any records when validation fails


        // $query->where('0=1');


        return $dataProvider;


    }


    $query->andFilterWhere([


        'contributionid' => $this->contributionid,


        'amount' => $this->amount,


    ]);


    $query->andFilterWhere(['like', 'members.memberid', $this->memberid]);


    $query->andFilterWhere(['like', 'comment', $this->comment]);


    if(isset($this->date) && $this->date!=''){


    $date_explode = explode("TO", $this->date);


    $date1 = trim($date_explode[0]);


    $date2=  trim($date_explode[1]);


    $query->andFilterWhere(['between', 'date', $date1,$date2]);


    }


    return $dataProvider;


}

below is my index view file:

<?php

use yii\helpers\Html;

//use yii\grid\GridView;

use kartik\grid\GridView;

/* @var $this yii\web\View */

/* @var $searchModel frontend\models\ContributionsSearch */

/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = ‘Contributions’;

$this->params[‘breadcrumbs’][] = $this->title;

?>

<div class="contributions-index">

<h1><?= Html::encode($this->title) ?></h1>


<?php // echo $this->render('_search', ['model' => $searchModel]); ?>





<p>


    <?= Html::a('Create Contributions', ['create'], ['class' => 'btn btn-success']) ?>


</p>





<?php 


use frontend\models\Members;


$members=  Members::find()->all();


use yii\helpers\ArrayHelper;


$items=  ArrayHelper::map($members, 'memberid', 'name');    


// Generate a bootstrap responsive striped table with row highlighted on hover


$gridColumns=[


    ['class' => 'kartik\grid\SerialColumn'],        


    [


        'vAlign'=>'middle',


        'width'=>'180px',


        'value'=>'member.name',


        'attribute' => 'memberid',


        'filter'=>ArrayHelper::map(Members::find()->orderBy('name')->asArray()->all(), 'memberid', 'name'),  


        'filterType' => GridView::FILTER_SELECT2,


        'filterWidgetOptions'=>[


        'pluginOptions'=>['allowClear'=>true],


        ],


        'filterInputOptions'=>['placeholder'=>'Select Member'],


        'format'=>'html',


    ], 


    [


        'class' => '\kartik\grid\DataColumn',


        'attribute' => 'amount',


        'format'=>['decimal',2],    


        'pageSummary' => true


    ],


    'comment',


    [


    'attribute' => 'date',


    'format'=>'date',


    'filterType'=> \kartik\grid\GridView::FILTER_DATE_RANGE,


    'filterWidgetOptions' => [


    'presetDropdown' => true,


    'pluginOptions' => [


    'format' => 'YYYY-MM-DD',


    'separator' => ' TO ',


    'opens'=>'left',


    ] ,


    'pluginEvents' => [


    "apply.daterangepicker" => "function() { apply_filter('date') }",


    ]    


    ],


    ],


    ['class' => 'kartik\grid\ActionColumn']


];


echo GridView::widget([


    'dataProvider'=> $dataProvider,


    'filterModel' => $searchModel,


    'filterRowOptions'=>['class'=>'kartik-sheet-style'],


    'columns' => $gridColumns,


    'responsive'=>true,


    'resizableColumns'=>true,


    'floatHeader'=>true,


    'showPageSummary' => true,


    'hover'=>true,


    'pjax'=>true,


    'pjaxSettings'=>[


    'neverTimeout'=>true,

]

]);


?>

</div>

<script type="text/javascript">

function apply_filter() {

$(’.grid-view’).yiiGridView(‘applyFilter’);

}

</script>

This may not be the most efficient implementation but it works and I would like to get more information and suggestions on this too. The javascript function at the end of the index view file helps to reload the grid once a selection of daterange is changed.Hope this helps