Yii 1.1: Using CJuiDatePicker for CGridView filter

29 followers

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(
        ...
        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) {
        //use the same parameters that you had set in your widget else the datepicker will be refreshed by default
    $('#datepicker_for_due_date').datepicker(jQuery.extend({showMonthAfterYear:false},jQuery.datepicker.regional['ja'],{'dateFormat':'yy/mm/dd'}));
}
");

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 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 12 comments

#16751 report it
softark at 2014/03/25 06:21am
i18nScriptFile

@KonApaz,

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
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"

@KonApaz

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) {
    $('#datepicker_for_due_date').datepicker();
}
");
#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
question

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
good

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
@coy_coy

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
question

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

'value'=>'date("m/d/Y",strtotime($data->date_requested))'

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

thanks pal its very useful for me

Leave a comment

Please to leave your comment.