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
[size="5"]Requirements[/size]
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'); ?>
<?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'); ?>
[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](https://github.com/thebrowser/jquery.ui.monthpicker "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',
'options'=>array(
'dateFormat'=>'yy-mm',
),
'htmlOptions'=>array(
'onChange'=>'js:doSomething()',
),
));
[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 $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”]$form=$this->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,
'htmlOptions'=>$htmlOptions,
));
}
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]
[size="5"]Resources[/size]
-
github page
-
demo page
-
extension page
That’s it. If you find bugs or have suggestions for improvements, please let me know.