Yii Framework Forum: Monthpicker Widget - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Monthpicker Widget Wrapper Widget for the JUI Monthpicker Widget from Julien Poumailloux Rate Topic: -----

#1 User is offline   c@cba 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 43
  • Joined: 02-December 11

Posted 09 February 2013 - 08:10 AM

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
Posted Image

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](https://github.com/t....ui.monthpicker "monthpicker github page").
`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.<br>
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
- extension page


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

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users