monthpicker Follow @yiiframework

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.