Zii GridView - How to add a calendar to filter

Hi guys,

I’m working with CGridView to display a data list as a table. In table header, CGridView supports filter as an input or drop down list. But my data list has date column and I’d like to filter by date. I use extension SCalendar to display calendar by overwrite function renderFilterCellContent() of CDataColumn. However, I have 2 problems need your help:

  1. How can call ajax after select a date by calendar automatically?

  2. When I input date in input textbox, the filter works but after that, script to run js calendar dies. The calendar cannot show again by clicking the button of calendar.

Hello PansyNguyen,

Have you found a solution? I have the same problem :( .

Thank you.

Here is the solution :




$this->widget('zii.widgets.grid.CGridView', array(

        'id'=>'facture-grid',

        'dataProvider'=>$model->search(),

        'filter'=>$model,

        'columns'=>array(

                'FullNumFact',

		array('name'=>'DateFact',

			'value'=>'$data->DateFact',	

			'filter'=>$this->widget('zii.widgets.jui.CJuiDatepicker', array('model'=>$model, 'attribute'=>'DateFact','language'=>'fr'), true),

		),

        ),

        'afterAjaxUpdate'=>'function(){

				jQuery("#'.CHtml::activeId($model, 'DateFact').'").datepicker({ });

				$.datepicker.setDefaults($.datepicker.regional["fr"]);

			}',

));



It doesn’t display for me. Are there any additional JS files included when you insert the DatePicker widget?

I think these two libraries are sufficient:




Yii::app()->clientScript->registerCoreScript('jquery');

Yii::app()->clientScript->registerCoreScript('jquery.ui');



and the localization file (FR) : http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-fr.js

Hi everyone i have data in the $contents, so now i want those values to be displayed in the CGridView. Can anyone help on this how to assign to columns r dataprovider?

Thanks in advance

Have you tried removeing the other jquery stuff from the page?

For me, the advance search stuff on the admin view was conflicting. I removed that and now the date picker works.

Only issue is, I can’t have an empty value in there. It’s defaulting to 1969.

Is anyone have an idea how to use it with CListView?

http://blog.yiibook.com/?p=452

I seen extenstion that adds calendar as filter, you can use it, or learn, how it works, but it’s code isn’t very clean: sydatecolumn

Hi everybody, I discover a little diference to do it works: take a look in afterAjaxUpdate and filter in the array defaultOptions

<?php $this->widget(‘zii.widgets.grid.CGridView’, array(

            'id'=&gt;'tbl-precios-grid',


            'dataProvider'=&gt;&#036;m_precios-&gt;search(),


            'filter'=&gt;&#036;m_precios,


            'afterAjaxUpdate'=&gt;'function(){


                            jQuery(&quot;#'.CHtml::activeId(&#036;m_precios, 'ini_vigencia').'&quot;).datepicker({ });


                            &#036;.datepicker.setDefaults(&#036;.datepicker.regional[&quot;es&quot;]);


                    }',


            'columns'=&gt;array(


                    //'ini_vigencia',


                    array('name'=&gt;'ini_vigencia',


                            'value'=&gt;'&#036;data-&gt;ini_vigencia',     


                            'filter'=&gt;&#036;this-&gt;widget('zii.widgets.jui.CJuiDatepicker', 


                                    array('model'=&gt;&#036;m_precios, 


                                           'attribute'=&gt;'ini_vigencia',


                                           'language'=&gt;'es',


                                            'defaultOptions'=&gt;array(


                                            'autoSize'=&gt;true,


                                            'showAnim'=&gt;'fold',


                                            'dateFormat'=&gt;'yy-mm-dd',


                                            'duration'=&gt;'fast',


                                            'buttonImage'=&gt;Yii::app()-&gt;baseUrl.'/images/calendar.png',


                                            'selectOtherMonths'=&gt;true,


                                            'showButtonPanel'=&gt;true,


                                            'showOn'=&gt;'button',


                                            'showOtherMonths'=&gt;true,


                                            'changeMonth'=&gt;true,


                                            'changeYear'=&gt;true,


                                        ),


                                    ), 


                                    true),


                    ),





                    array(


                            'class'=&gt;'CButtonColumn',


            ),


    )); 


    


    ?&gt;

Try this :

array(

                    'name' =&gt; 'date',


		 'value'=&gt;'(&#036;data-&gt;date == 0000-00-00) ? &quot;Not Set&quot; : date_format(new DateTime(&#036;data-&gt;date), &quot;d-m-Y&quot;)',


                     'filter' =&gt; &#036;this-&gt;widget('zii.widgets.jui.CJuiDatePicker', array(


                            'model' =&gt; &#036;model,


                            'attribute' =&gt; 'academic_term_start_date',


                            'options'=&gt;array(


			'dateFormat'=&gt;'dd-mm-yy',


			'changeYear'=&gt;'true',


			'changeMonth'=&gt;'true',


			'showAnim' =&gt;'slide',


			'yearRange'=&gt;'1900:'.(date('Y')+1),


			'buttonImage'=&gt;Yii::app()-&gt;request-&gt;baseUrl.'/images/calendar.png',			


	    ),


		'htmlOptions'=&gt;array(


		'id'=&gt;'date',


	     ),


		


                    ), 


                    true),





            ),