Yii 1.1: 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

$this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider' => $model->search(),
    'filter' => $model,
    'afterAjaxUpdate' => 'reinstallDatePicker', // (#1)
    'columns' => array(
            'name' => 'due_date',
            'filter' => $this->widget('zii.widgets.jui.CJuiDatePicker', array(
                '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) {
        //use the same parameters that you had set in your widget else the datepicker will be refreshed by default


  • 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 language specific 'i18nScriptFile' option manually when I first wrote this article. Setting 'language' option was not enough. But now, you don't need to do it. (#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

Total 14 comments

#19215 report it
Gerhard Liebenberg at 2015/04/17 08:55am
function brackets and English datepicker


First Issue

In my case (TbExtendedGridView), the function being called in afterAjaxUpdate needs brackets:

'afterAjaxUpdate' => 'reinstallDatePicker', // (#1)

should be

'afterAjaxUpdate' => 'reinstallDatePicker()', // (#1)

Second Issue - English

To get the datepicker in English I first did 'language'=>'', but that did not work.

Then I added 'i18nScriptFile' => 'jquery.ui.datepicker-en.js'. It worked but my browser complained about not finding such file. Huh???

Then I set regional to '' inside the reinstallDatePicker() function:


It worked, but only after ajax events.

Lastly I set regional to '' in a separate jquery function outside the reinstallDatePicker() function - so that it is not limited to ajax events.

// Reset the datepicker after gridview ajax
function reinstallDatePicker(id, data) {
// Set all datepickers to English

Gr8 wiki!

#18521 report it
letsjump at 2014/11/09 10:05am
Automate the process by extending CGridView

Thank you very much!
You could also extend the CGridView base widget for automate all you Grid Views:
1: Create a file named MyGridView.php in protected/components folder with this content:

class MyGridView extends CGridView
    // datePickers html attr.ID without slash (#)
    public $datePickers = Array();
    // initialize the parent widget 
    // and call reinstallDatePickers's method
    public function init() {
    // reinitialize jQuery datePickers after an ajax grid update
    public function reinstallDatePickers()
        $javascript = '';
        foreach($this->datePickers as $datePicker)
            $javascript .= $('#{$datePicker}').datepicker(jQuery.extend(jQuery.datepicker.regional['it']));";
    Yii::app()->clientScript->registerScript('re-install-date-picker', "
        function reinstallDatePicker(id, data) {

2: In your view replace the widget CGridView new widget MyGridView adding the property datePickers filled with an array of this view datepickers ID's:

$this->widget('MyGridView', array(
    // array of datePicker's column ID without slash (#)
    'datePickers'=> Array('MyDateColumn1', 'MyDateColumn2'),
    'afterAjaxUpdate' => 'reinstallDatePicker',
#16751 report it
softark at 2014/03/25 06:21am


Yeah, I've confirmed that you are right. The same things happened with 'language' set to 'ja' when I tested in my environment.

And I notice that once I have made the following line active again ...

'i18nScriptFile' => 'jquery.ui.datepicker-ja.js', // (#2)

then it begins to work as I expect.

#16743 report it
Kostas Apazidis (KonApaz) at 2014/03/24 06:47pm
RE: Use "defaultOptions"

Hi @softark

I tried at my work

I am not sure about 'defaultOptions' (#3) But In my case ('language' => 'el') the Greeks are displayed only the first time. After of the first ajax request datepicker is displayed in Chinese!

Using jQuery.datepicker.regional['el'] all works fine... If you know something about it please inform me!

#16742 report it
softark at 2014/03/24 06:02pm
Use "defaultOptions"


Are you sure that you have to set the options each time? Did you confirm that the #3 tip doesn't work?

I believe the following is enough, because "defaultOptions" will take care to set the same options.

// (#5)
Yii::app()->clientScript->registerScript('re-install-date-picker', "
function reinstallDatePicker(id, data) {
#16442 report it
dika46 at 2014/02/23 01:19pm
english language

@lavket, you need to specify language translation for this:

'language' => 'en',
'i18nScriptFile' => 'jquery.ui.datepicker-en.js',

hope it helps

#15258 report it
lavket at 2013/10/21 02:47pm
Question ??

I don't want any translation in the Date Picker. I just want the default language (i.e English in the Date Picker. Even if i set language to English (language= ''), it doesn't work. How do i remove the translation ?

#15252 report it
gpr at 2013/10/21 05:10am

is there a way to hide the text field in CJuiDatePicker

#14712 report it
softark at 2013/09/05 07:04am
re: i18nScriptFile

I had to specify language specific i18nScriptFile manually to get the translated labels for weekdays when I first wrote this article:

'language' => 'ja',
'i18nScriptFile' => 'jquery.ui.datepicker-ja.js', // (#2)

But now, you can remove the 2nd line.

'language' => 'ja',
/* 'i18nScriptFile' => 'jquery.ui.datepicker-ja.js', */

Then it will load 'jquery-ui-i18n.min.js' automatically, and it will provide you with the proper language translation.

#14710 report it
lisseth23 at 2013/09/05 03:52am

where should I copy 'i18nScriptFile' => 'jquery.ui.datepicker-ja.js' to translate the calendar?

#14610 report it
portishead at 2013/08/28 04:12am
Thanx a lot

This was a great help.

#10283 report it
softark at 2012/10/17 08:38am

Do you try to use 'value' property of CJuiDatePicker in the filter? Don't use 'name' and 'value', use $model and 'attribute' instead.

#10273 report it
coy_coy at 2012/10/17 02:07am

date picker filter will not return the date which I selected. I set the date column value to this


I think this is due to hour and second values is not set. any help?

#10070 report it
Kollipara Rama Krishna at 2012/10/03 08:39am

thanks pal its very useful for me

Leave a comment

Please to leave your comment.

Write new article