Yii 1.1: monthpicker

Yii extension wrapping the jQuery UI Monthpicker Widget from Julien Poumailloux
6 followers

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

monthpicker screenshot

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

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

Total 2 comments

#18584 report it
shaggy at 2014/11/21 08:19am
How can we set Maximum Date?

Hi,

Thank you very much for this awesome widget.

Can we set the Maximum date that can be selected ?

If yes,Please tell how?.

Thanks Again

#12177 report it
Peter JK at 2013/03/04 11:27am
thx God.. finally here..

to create monthly report, sometimes I only need month and year for reporting.

This extension, i have been waiting for so long...

thank you very much .. c@cba

Leave a comment

Please to leave your comment.

Create extension