Using CJuiDatePicker for CGridView filter

Yii Framework Wiki

Popular Tags

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(
		...
		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.

Revisions

View all history

10 years ago by Kostas Apazidis (KonApaz)
use the same parameters that you had set...
11 years ago by softark
Change about 'i18nScriptFile'
11 years ago by softark
Add links to another wiki on CJuiDatePic...

User Contributed Notes 21

#10070

0 0

thanks

thanks pal its very useful for me

Kollipara Rama Krishna at Oct 3, 2012, 12:39:31 PM

#10273

0 0

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?

coy_coy at Oct 17, 2012, 6:07:23 AM

#10283

0 0

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

softark at Oct 17, 2012, 12:38:28 PM

#14610

0 0

Thanx a lot

This was a great help.

portishead at Aug 28, 2013, 8:12:08 AM

#14710

0 0

good

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

lisseth23 at Sep 5, 2013, 7:52:29 AM

#14712

0 0

re: i18nScriptFile

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

[php]
'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.

softark at Sep 5, 2013, 11:04:32 AM

#15252

0 0

question

is there a way to hide the text field in CJuiDatePicker

gpr at Oct 21, 2013, 9:10:38 AM

#15258

0 0

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 ?

lavket at Oct 21, 2013, 6:47:12 PM

#16442

1 0

english language

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

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

hope it helps

dika46 at Feb 23, 2014, 6:19:16 PM

#16742

1 0

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();
}
");

softark at Mar 24, 2014, 10:02:38 PM

#16743

0 0

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!

Kostas Apazidis (KonApaz) at Mar 24, 2014, 10:47:24 PM

#16751

0 0

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.

softark at Mar 25, 2014, 10:21:49 AM

#18521

1 0

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:

<?php 
Yii::import('zii.widgets.grid.CGridView');

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() {
        parent::init();
        $this->reinstallDatePickers();
    }

    // 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) {
			{$javascript}
		}
	");
    }
}

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',
    ...
    'columns'=>Array(
        ...
    )
));

letsjump at Nov 9, 2014, 3:05:24 PM

#19215

0 0

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:

$('#datepicker_for_due_date').datepicker(jQuery.extend(jQuery.datepicker.regional['']));

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) {
	$('#datepicker_for_due_date').datepicker(jQuery.extend());
};
			
// Set all datepickers to English
$.datepicker.setDefaults($.datepicker.regional['']);

Gr8 wiki!

Gerhard Liebenberg at Apr 17, 2015, 12:55:57 PM

#19749

0 0

Still getting exception

I've tried all the suggestions I could find, both here and other sites, and I can't get this to work. If I include the line,

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

or a variation (eg: without the "-GB", I get the exception that the file could not be found in my assets/.../jui/js folder.

If I comment that line out, then the first time I load the page, the date-picker is in Chinese. If I select a date then after the ajax load, it's in English again, so the reinstallDatePicker() function is working fine.

Any suggestions of what else I can try?
Thanks!

GrayMac at Jan 19, 2016, 12:01:19 PM

#19750

0 0

@GrayMac

If you are using a later version of Yii 1.1, you don't have to set i18nScriptFile by yourself. It defaults to 'jquery-ui-i18n.min.js', which is a combined script of many language specific scripts like datapicker-ja.js, datepicker-en-GB.js, and so forth. And it is automatically supplied by Yii together with 'jquery-ui.min.js'.

Take a look at the source codes in 'framework/web/js/source/jui/js'.

So, I believe what you have to do is just setting 'language' option as 'en-GB'.

softark at Jan 19, 2016, 1:35:55 PM

#19751

0 0

@softark

Thanks for the quick reply!
That makes sense, but for some reason it still doesn't work. It's really strange, if I uncomment the i18nScriptFile line, even if I leave the value blank, the grid is in English but I get an error log saying the file couldn't be found in assets. But if I comment out the line, it's in Chinese, even with the language set to en-GB.
Here's my code:

'filter' => $this->widget('zii.widgets.jui.CJuiDatePicker', array(
                'model'=>$model, 
                'attribute'=>'workout_date', 
                'language' => 'en-GB',
                //'i18nScriptFile' => 'jquery.ui.datepicker-en.js',
                'htmlOptions' => array(
                    'id' => 'datepicker_for_date',
                    'size' => '10',
                ),
                'defaultOptions' => array(  // (#3)
                    'showOn' => 'focus',

GrayMac at Jan 19, 2016, 2:59:51 PM

#19752

0 0

@GrayMac

Did you try what Gerhard did?

'filter' => $this->widget('zii.widgets.jui.CJuiDatePicker', array(
                'model'=>$model, 
                'attribute'=>'workout_date', 
                'language' => 'en-GB',
                //'i18nScriptFile' => 'jquery.ui.datepicker-en.js',
                'htmlOptions' => array(
                    'id' => 'datepicker_for_date',
                    'size' => '10',
                ),```
    ...
);

Yii::app()->clientScript->registerScript('re-install-date-picker', "
// Reset the datepicker after gridview ajax
function reinstallDatePicker(id, data) {
    $('#datepicker_for_due_date').datepicker(jQuery.extend());
};

// Set all datepickers to English
$.datepicker.setDefaults($.datepicker.regional['en-GB']);
");

softark at Jan 19, 2016, 10:33:57 PM

#19753

0 0

@softark

Yes, I had tried Gerhard's approach, which didn't work either. However, I've just managed to fix the problem but I'm baffled as to why it works. Using the sample code above, if I change "defaultOptions" to "options", then I can remove the language and script lines and it all works fine! With defaultOptions, the datepicker is Chinese, no matter what language I set. Any idea why??

GrayMac at Jan 19, 2016, 11:41:14 PM

#19754

0 0

@GrayMac

Oh, I'm glad that you've solved the problem.

I myself don't understand why "options" works while "defaultOptions" not. The article was first written in 2012, and I haven't updated it for a while. Maybe a bit outdated.

softark at Jan 20, 2016, 3:27:56 AM

#19755

0 0

@softark

Thanks anyway, this was very helpful!

GrayMac at Jan 20, 2016, 8:06:43 AM

Categories

Popular Tags

Recent Comments