Published on

How to use calendar to filter list data in CGridView

  • avatar
    Bal Singh

Some time there is need to filter data in CGridView list in Yii framework. So fill date by required format is not a good choice. So use CJuiDatePiker widget of Yii to select date and filter list. So How to add a calendar in filter area, see sample code.

Sample Code

$this->widget('zii.widgets.grid.CGridView', array(  
    'id' => 'result-grid',  
    'dataProvider' => $model->search(),  
    'filter' => $model,  
    'afterAjaxUpdate' => 'reinstallDatePicker', //call function to reinstall date picker after filter result  
    'columns' => array(  
            'name' => 'date',  
            'filter' => $this->widget('zii.widgets.jui.CJuiDatePicker', array(  
            'model' => $model,  
            'attribute' => 'date',  
            'showAnim' =>'slide',  
/* function to re install date picker after filter the result. if you don't use it then after filter the result calendar will not shown in filter box */  
Yii::app()->clientScript->registerScript('re-install-date-picker', "  
function reinstallDatePicker(id, data) {  
        changeMonth: true,  
        changeYear: true,  

And result is