ejuitimepicker Follow @yiiframework

This extension is a wrapper for Timepicker addon which adds time controls to jQuery UI Datepicker.

EJuiTimePicker

EJuiTimePicker is an axtension for Yii framework. This extension is a wrapper for Timepicker addon which adds a timepicker to jQuery UI Datepicker.

This extension is based on CJuiDateTimePicker extension, hovewer it has different widget call (prefix of 'C' might get confusing in the future) and few other tricks up its sleeve.

Requirements ¶

Yii 1.1 or above (tested on 1.1.8)
jQuery
jQuery UI (datepicker and slider components)

Installation ¶

Move EJuiTimePicker folder in your applications extensions folder (default: protected/extensions).

Using extension ¶

Just place the following code inside your view file:

<?php $this->widget( 'ext.EJuiTimePicker.EJuiTimePicker', array(
  'model' => $model, // Your model
  'attribute' => 'end_date', // Attribute for input
)); ?>

You can also change some default settings (more on this later).

Widget Factory ¶

To make your life easier, you can configure widgetFactory component with some default options (all the options can be set for widget which will overwrite widgetFactory option). Change your main.php config file to look similarly to this:

'components' => array(
  'widgetFactory' => array(
    'widgets' => array(
      'EJuiTimePicker' => array(
        'options' => array(
          'dateFormat' => 'yy-mm-dd',
          'showOn' => 'both',
          'buttonText' => 'Open calendar',
          // Any other option from http://jqueryui.com/demos/datepicker/
          // Or http://trentrichardson.com/examples/timepicker/
        ),
        'timeOptions' => array(
          'showOn' => 'focus',
        ),
        'htmlOptions' => array(
          'autocomplete' => 'off',
          'size' => 10,
          'maxlength' => 10,
        ),
        'timeHtmlOptions' => array(
          'size' => 5,
          'maxlength' => 5,
        ),
        'language' => 'lt',
        'mode' => 'date',
      ),
    ),
  ),
),

options sets the options for jquery addon. All available options can be found on jQuery Datepicker and Timepicker addon pages.
timeOptions is an array with options which will be overwrited when using only timepicker (for example you want to replace icon from calendar to a clock).
htmlOptions is an array with html options for input.
timeHtmlOptions is an array with html options for input which will be overwriten when using only timepicker (for example you want to make it smaller so only hour and minutes can be inputed).
language localization string. This will try to add localization file if it is found (localization files are provided by addon, you can make your own).
mode this is a mode of the extension. Allowed options: date (will add only date picker), time (will add only time picker), datetime (will add both. This is default value).

Resources ¶

Notes ¶

For your convenience extension contains Timepicker addon. Hovewer to make sure you have the newest addon you should download it from Timepicker addon Git repository

Total 5 comments

#12028

Bapi Roy at 2013/02/21 11:33am

Fix for localization to Engilsh

Just remove or committe 'language' => 'en'

#9386

Paresh Tokekar Kabira at 2012/08/08 03:39am

EJuiTimePicker displaying either chinese or japanese characters

When language is set to 'en' in configuration (main.php), EJuiTimePicker displaying Simplified Chinese characters.

To resolve localization issue you can restore the default localizations with: $.datepicker.setDefaults($.datepicker.regional['']); (Please check stackoverflow discussion for more detail.)

So, to resolve localization issue in extension simply replace line 92 with:

$js = "jQuery.datepicker.setDefaults(jQuery.datepicker.regional['']); jQuery('#{$id}').{$this->mode}picker(jQuery.extend({showMonthAfterYear:false}, jQuery.datepicker.regional['{$this->language}'], {$options}));";

#8083

Tibor Katelbach at 2012/05/09 06:26am

CJuiDatePicker and EJuiTimePicker together , be carefull

if you are getting somethign like this Uncaught RangeError: Maximum call stack size exceeded and you are using in one same form zii.widgets.jui.CJuiDatePicker and ext.EJuiTimePicker.EJuiTimePicker

Then you might loose a lot of time (like me) before notcing the timepicker lib is loaded twice on as the classic version and the other as the minified , which runs into conflict the solution is to simply comment out the js lib loading in the less generic widget $cs->registerScriptFile( $assets . self::ASSETS_NAME . '.js',CClientScript::POS_END );

hope this helps someone

#7760

Tibor Katelbach at 2012/04/16 06:45am

bug corrected : translation issue

Hi when using the module as timepicker localisation didn't because the regional settings was fixed on datepicker but should be relevant to $this->mode

simply replace this , line 92 datepicker by {$this->mode}picker

$js = "$('#{$id}').{$this->mode}picker($.extend({showMonthAfterYear:false}, $.{$this->mode}picker.regional['{$this->language}'], {$options}));');";

#7079

Junior - df9 at 2012/02/22 09:23pm

uncaught exception

uncaught exception: Missing instance data for this datepicker ???

$this->widget('ext.EJuiTimePicker.EJuiTimePicker',
 
                                    array(
                                        'model'=>$model,
                                        'attribute'=>'start_time',
                                        'options' => array(//'changeMonth' => 'true',
                                                            //'changeYear' => 'true',
                                                            //'showButtonPanel' => 'true',
                                                            //'constrainInput' => 'false',
                                                            //'duration'=>'fast',
                                                            //'showAnim' =>'slide',
                        //'showSecond'=>true,
                                                //'language'=>'en'
                    ),
                                        'htmlOptions'=>array()
                                    )
            );

Please login to leave your comment.