Yii 1.1: ejuitimepicker

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

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 report it
Bapi Roy at 2013/02/21 11:33am
Fix for localization to Engilsh

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

#9386 report it
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 report it
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 report it
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 report it
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()
                                    )
            );

Leave a comment

Please to leave your comment.

Create extension