Filter CGridView with dateStart and dateEnd

Yii 1.1 General Discussion
21

The problem comes from the Extension jui, the jQuery UI version used is 1.7.1

can we change the ui version used for this extension ?

http://www.yiiframework.com/extension/jui/

22

I just figured out, the reason why the datepicker would not appear for me was because I had the ‘advanced search’ form on the page and that had the same input field ID as the filter field.

23

Exactly, it applies to the first occurrence of the date fields

24

I wish someone had realised that before me :(

25

OK I put that afterAjaxValidate function in and the datepicker now appears after filtering, however it does not keep the same ‘options’ as specified in its initial (CJuiWidget) form, for example: showButtonPanel, dateFormat, buttonImage.

How can we make it keep the same options?

26

You have to specify them manually.

Check at the bottom of your page, there is the javascript code generated by Yii for the dataPicker.

Copy this code and paste in the afterAjaxUpdate, there will be more options:


 'afterAjaxUpdate'=>"function(){jQuery('#".CHtml::activeId($model, 'town_id')."').datepicker(['showButtonPanel': true, 'dateFormat':... ])}",
27

Cheers mate. Actually we need to use curly brackets in the datepicker paramaters array (instead of square ones).

Question - how can I extract this config from a model function so that it can be used by both the initial CGridView call and the afterAjaxUpdate call?

For example I have the following:


public function getDatepickerOptions()

{

	return array(

		'dateFormat'=>'dd M yy',

		'showOn'=>'both',

		'buttonImage'=>bu('images/calendar.gif'),

		'buttonImageOnly'=>true,

		'buttonText'=>'Select',

		'showButtonPanel'=>true,

	);

}

And in my datepicker widget I call it like this:


'options'=>$model->datepickerOptions,

I try to put this in the datepicker parameter in my afterAjaxUpdate function but it returns ‘Array’. The output should be:


jQuery('#register_date_filter').datepicker({

'dateFormat':'dd M yy','showOn':'both','buttonImage':'/localhost/images/calendar.gif','buttonImageOnly':true,'buttonText':'Select','showButtonPanel':true

});
28

I think that CJson::encode() can do the trick.

What about:


'afterAjaxUpdate'=>"function(){jQuery('#".CHtml::activeId($model, 'town_id')."').datepicker(

jQuery('#register_date_filter').datepicker(".CJson::encode($model->datepickerOptions).");}"

It looks tasty…

29

WOW! Thanks buddy!

30

It’s a pity that we have to rewrite the js of datepicker, but the final result is good indeed.

I will add to my list of favourite hacks

31

Nice!

I was banging my head against the wall trying to figure this out, works perfectly now :)

32

I found another solution:




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

	'id'=>'requerimento-grid',

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

	'filter'=>$model,	

	'columns'=>array(

		'req_codigo',

		'req_date',  /* yes, without anything!*/

   )

));


//declare a 'fake' DatePicker widget to load CJuiDatepicker imports

$this->widget('zii.widgets.jui.CJuiDatepicker', array('name' => 'CJuiDatepicker_no_filter', 'language' =>'pt-BR'), true);


// declares a script binds the datepicker to fields you specify    

Yii::app()->clientScript->registerScript('live_date_picker', "

		$('input[name=\"".CHtml::activeName($model, 'req_date')."\"]').live('focus', function(){						

			$(this).datepicker(jQuery.datepicker.regional['pt-BR']);  //include here your definitions for datepicker

    	});

	");

?>
33

Now thats a bug… still exists in latest SVN

34

With some delay time…thank you Zaccaria for the ‘afterAjaxUpdate’ hint!

I added the dateFormat option for my needs, too:




'afterAjaxUpdate'=>"function(){jQuery('#".CHtml::activeId($model,'pdate')."').datepicker({dateFormat:'dd.mm.yy'})}",

This framework is wonderful!