1. Requirements
2. Unpack the widget
3. Use the widget
4. Resources

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.

Requirements ¶

Tested with Yii 1.1.9.

Unpack the widget ¶

Extract the contents of the zip file directly into the protected/extensions/ folder of your Yii application.

Use the widget ¶

The Look ¶

The Code ¶

1. Basic use with model and attribute ¶

You can use the widget by placing the following code in your view file (e.g. _form.php)

<?php echo $form->labelEx($model,'some_date'); ?>
<?php 
	$this->widget('ext.EJuiMonthPicker.EJuiMonthPicker', array(
		'model' => $model,	
		'attribute' => 'some_date',
		'options'=>array(
			'yearRange'=>'-5:+15',
			'dateFormat'=>'yy-mm',
		),
		'htmlOptions'=>array(
			'onChange'=>'js:doSomething()',
		),
	));  
?>
<?php echo $form->error($model,'some_date'); ?>

some_date is a sample attribute name, replace it with your own.
options are the options of the jQuery widget. You can find a detailed list of available options on the github page of the jQuery widget.
htmlOptions are the usual html-options that are applied to the input element.

2. Basic use with name and value ¶

$this->widget('ext.EJuiMonthPicker.EJuiMonthPicker', array(
	'name' => 'some_date',	
	'value' => '2013-02',
	'options'=>array(
		'dateFormat'=>'yy-mm',
	),
	'htmlOptions'=>array(
		'onChange'=>'js:doSomething()',
	),
)); 

name will be the name of the generated input element (textField). value will be the initial value of the input element. options and htmlOptions are as above.

3. Localization (i18n) ¶

The wrapper Yii widget translates all translatable elements of the jQuery widget.
You can use your own translation by placing your translation file under EJuiMonthPicker/messages. It already contains translation files for german and turkisch. You could simply duplicate and edit one of them.

4. Tips for usage ¶

Default Options ¶

In the file EJuiMonthPicker/EJuiMonthPicker.php, default options for the jQuery widget are declared/set. You might want to edit the variable $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).

Simple use with $form->monthPicker(...) ¶

If you are using the giix code generator you should have the giix-components GxHtml that extends the class CHtml, and GxActiveForm that extends the class CActiveForm. Plus, the forms in your _form.php files should start with
$form=$this->beginWidget('GxActiveForm', array(...)).
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,
		'htmlOptions'=>$htmlOptions,
	)); 
}

and the following code into the file GxActiveForm.php:

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 Html.php and ActiveForm.php under protected/components, and use them respectively as described above.
In that case make sure the forms in your _form.php files start with
$form=$this->beginWidget('ActiveForm', array(...)).

Resources ¶

• github page
• demo page
• yii forum page

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