unchanged
Title
Using CJuiDatePicker for CGridView filter
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.