Monthpicker Widget

This is a simple Wrapper Widget for the jQuery UI Monthpicker Widget from Julien Poumailloux.

A Demo of the JQuery widget can be found here


Tested with Yii 1.1.9.

[size="5"]Unpack the widget[/size]

Extract the contents of the zip file directly into the [font="Lucida Console"]protected/extensions/[/font] folder of your Yii application.

[size="5"]Use the widget[/size]

[size="4"]The Look[/size]

[size="4"]The Code[/size]

[size="3"]1. Basic use with model and attribute[/size]

You can use the widget by placing the following code in your view file (e.g. [font="Lucida Console"]_form.php[/font])

<?php echo $form->labelEx($model,'some_date'); ?>


	$this->widget('ext.EJuiMonthPicker.EJuiMonthPicker', array(

		'model' => $model,	

		'attribute' => 'some_date',










<?php echo $form->error($model,'some_date'); ?>

[font="Lucida Console"]some_date[/font] is a sample attribute name, replace it with your own.

[font="Lucida Console"]options[/font] are the options of the jQuery widget. You can find a detailed list of available options on [the github page of the jQuery widget]( "monthpicker github page").

[font="Lucida Console"]htmlOptions[/font] are the usual html-options that are applied to the input element.

[size="3"]2. Basic use with name and value[/size]

$this->widget('ext.EJuiMonthPicker.EJuiMonthPicker', array(

	'name' => 'some_date',	

	'value' => '2013-02',








[font="Lucida Console"]name[/font] will be the name of the generated input element (textField).

[font="Lucida Console"]value[/font] will be the initial value of the input element.

[font="Lucida Console"]options[/font] and [font="Lucida Console"]htmlOptions[/font] are as above.

[size="3"]3. Localization (i18n)[/size]

The wrapper Yii widget translates all translatable elements of the jQuery widget.<br>

You can use your own translation by placing your translation file under [font="Lucida Console"]EJuiMonthPicker/messages/[/font]. It already contains translation files for german and turkisch. You could simply duplicate and edit one of them.

[size="3"]4. Tips for usage[/size]

[size="2"]Default Options[/size]

In the file [font=“Lucida Console”]EJuiMonthPicker/EJuiMonthPicker.php[/font], default options for the jQuery widget are declared/set. You might want to edit the variable &#036;default_options in this widget file and add those options that you want to be applied application-wide (so you don’t need to add those options to every call of the widget).

[size="2"]Simple use with [font="Lucida Console"]$form->monthPicker(…)[/font][/size]

If you are using the giix code generator you should have the giix-components [font="Lucida Console"]GxHtml[/font] that extends the class [font="Lucida Console"]CHtml[/font], and [font="Lucida Console"]GxActiveForm[/font] that extends the class [font="Lucida Console"]CActiveForm[/font]. Plus, the forms in your _form.php files should start with

[font=“Lucida Console”]&#036;form=&#036;this-&gt;beginWidget('GxActiveForm', array(...))[/font].

Now, if you put the following code into the file Gxhtml.php:

public static function monthPicker($model, $attribute, $options=array(), $htmlOptions=array()) {

	$w = new CWidget;

	$w->widget('ext.EJuiMonthPicker.EJuiMonthPicker', array(

		'model' => $model,	

		'attribute' => $attribute,

		'options' => $options,




and the following code into the file [font="Lucida Console"]GxActiveForm.php[/font]:

public function monthPicker($model, $attribute, $options = array(), $htmlOptions = array()){

	return GxHtml::monthPicker($model, $attribute, $options,$htmlOptions);


you can use the monthpicker simply like this:

/*---vv--- SIMPLE USE ---vvv---*/

$form->monthPicker($model, 'some_date'));

// or

GxHtml::monthPicker($model, 'some_date'));

Note: Even if you don’t use giix, you can create your own component files similar to GxHtml and GxActiveForm, for example [font=“Lucida Console”]Html.php[/font] and [font=“Lucida Console”]ActiveForm.php[/font] under [font=“Lucida Console”]protected/components[/font], and use them respectively as described above.

In that case make sure the forms in your [font="Lucida Console"]_form.php[/font] files start with

[font=“Lucida Console”]$form=$this->beginWidget(‘ActiveForm’, array(…))[/font]


  • github page

  • demo page

  • extension page

That’s it. If you find bugs or have suggestions for improvements, please let me know.