How to use calendar to filter list data in CGridView

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

<?php  
$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(  
        'id',  
      ...........  
        array(  
            'name' => 'date',  
            'value'=>'$data->date',  
            'filter' => $this->widget('zii.widgets.jui.CJuiDatePicker', array(  
            'model' => $model,  
            'attribute' => 'date',  
            'options'=>array(  
            'dateFormat'=>'mm/dd/yy',  
            'changeYear'=>'true',  
            'changeMonth'=>'true',  
            'showAnim' =>'slide',  
            'yearRange'=>'2000:'.(date('Y')+1),  
            ),  
            'htmlOptions'=>array(  
            'id'=>'date',  
            ),  
            ),  
            true),  
            ),  
       ...........  
    ),  
   
));  
?>

<?php  
/* 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) {  
    jQuery('#date').datepicker({  
        changeMonth: true,  
        changeYear: true,  
    });  
}  
");  
?>

And result is