Difference between #1 and #2 of Using CJuiDatePicker for CGridView filter

unchanged
Title
Using CJuiDatePicker for CGridView filter
unchanged
Category
How-tos
unchanged
Tags
CJuiDatePicker, CGridView, filter
changed
Content
We can use a CJuiDatePicker for a CGridView inline filter.

I hope the following sample code fragment will be enough for you.

Sample Code 
------------------

~~~
[php]
$this->widget('zii.widgets.grid.CGridView', array(
	'dataProvider' => $model->search(),
	'filter' => $model,
	'afterAjaxUpdate' => 'reinstallDatePicker', // (#1)
	'columns' => array(
		...
		array(
			'name' => 'due_date',
			'filter' => $this->widget('zii.widgets.jui.CJuiDatePicker', array(
				'model'=>$model, 
				'attribute'=>'due_date', 
				'language' => 'ja',
				'i18nScriptFile' => 'jquery.ui.datepicker-ja.js', // (#2)
				'htmlOptions' => array(
					'id' => 'datepicker_for_due_date',
					'size' => '10',
				),
				'defaultOptions' => array(  // (#3)
					'showOn' => 'focus', 
					'dateFormat' => 'yy/mm/dd',
					'showOtherMonths' => true,
					'selectOtherMonths' => true,
					'changeMonth' => true,
					'changeYear' => true,
					'showButtonPanel' => true,
				)
			), 
			true), // (#4)
		),
		...
	),
));

// (#5)
Yii::app()->clientScript->registerScript('re-install-date-picker', "
function reinstallDatePicker(id, data) {
	$('#datepicker_for_due_date').datepicker();
}
");
~~~

### Note

- Call CController::widget() with the third parameter set to 'true'. (#4)
- Define 'afterAjaxUpdate' to call a javascript function that will reinstall the
datepicker, because it will return to a plain textField each time the grid is
updated by an ajax call. (#1) and (#5)
- I had to define 'i18nScriptFile' option. Setting 'language' option was not
enough. (#2)
- Use 'defaultOptions' instead of 'options', otherwise you have to set those
options again in the javascript function to reinstall the datepicker. (#3)

That's all. Have fun.

### More to read

- [jQuery UI
Datepicker](http://www.yiiframework.com/wiki/438/jquery-ui-datepicker/) explains
how to use CJuiDatePicker in details.