Yii 1.1: jtimepicker

A simple extension for time fields similar to the date picker widget.
10 followers

This is a wrapper of the excellent JQuery timepicker widget by Frank Galinas

Frank's Website

Requirements

Should work in V1.1 and above, only tested in 1.1.7.
See the note below regarding jui themes.

Usage

Just like the date picker widget, include this in your view file where time input is required.

Unpack the attached zip file into your extensions directory.

<?php
 $this->widget('application.extensions.jui_timepicker.JTimePicker', array(
    'model'=>$model,
     'attribute'=>'start_time',
     // additional javascript options for the date picker plugin
     'options'=>array(
         'showPeriod'=>true,
         ),
     'htmlOptions'=>array('size'=>8,'maxlength'=>8 ),
 ));
?>

Resources

Update

  • Now tested on 1.1.8

Important

It is very important that you are theming other widgets then you must theme this widget also. I suggest that you set this up in your config file. example:

<?php 
 
            'widgetFactory'=>array(
            'widgets'=>array(
                'CJuiAccordion'=>array(
                    'options'=>array(
                        'animated'=>'bounceslide',
                        ),
                    'theme'=>'le-frog',
                    'themeUrl'=>'/themes/nfa/jui',
                    ),
                'CJuiButton'=>array(
                    'theme'=>'le-frog',
                    'themeUrl'=>'/themes/nfa/jui',
                ),
                'CJuiDatePicker'=>array(
                    'theme'=>'le-frog',
                    'themeUrl'=>'/themes/nfa/jui',
                ),
                'JTimePicker'=>array(
                  'theme'=>'le-frog',
                  'themeUrl'=>'/themes/nfa/jui',
                ),
                'CGridView'=>array(
                    'cssFile'=>'/themes/nfa/gridview/styles.css',
                    ),
                /* end of widgets */
                ),
            ),
//            
?>

Total 3 comments

#9691 report it
taiff at 2012/09/03 08:07pm
Hours and Minutes support

There seems to be a bug in version 0.2.2 of the original JQuery component.

To solve, I've downloaded the latest version and replaced jquery.ui.timepicker.js with the latest.

To test, I've tried the following and it works:

$this->widget('application.extensions.jui_timepicker.JTimePicker', array(
        'model'=>$model,
        'attribute'=>'timeStart',
        // additional javascript options for the date picker plugin
        'options'=>array(
            'showPeriod'=>true,
            'hours'=>array('starts'=>6, 'ends'=>23),
            'minutes'=>array('interval'=>15),
            ),
        'htmlOptions'=>array('size'=>8,'maxlength'=>8 ),
    ));

Hope this helps someone.

#8355 report it
Joblo at 2012/05/28 04:55pm
Language support

Unfortunally this extension doesn't support multiple languages. You have to add a code like below:

//add this function to the JTimePicker class
 
public function getI18nJsCode($id,$options)
    {
        $langFileName = 'jquery.ui.timepicker-' . $this->language .'.js';
        $langFile = dirname(__FILE__) . '/assets/i18n/' . $langFileName;
 
        if ($this->language!='' && $this->language!='en' && is_file($langFile))
        {
 
            $this->scriptUrl = $this->assetsPath .'/i18n/';
            $this->i18nScriptFile = $langFileName;
            $this->registerScriptFile($this->i18nScriptFile);
            return "jQuery('#{$id}').timepicker(jQuery.extend(jQuery.timepicker.regional['{$this->language}'], {$options}));";
        }
        else
            return "jQuery('#{$id}').timepicker($options);";
    }

Replace $js = "jQuery('#{$id}').timepicker($options);"; (line 146) in the function run() with the result of the new function.

public function run()
{
  ...
 //add missing language support
 $js = $this->getI18nJsCode($id,$options);
 //$js = "jQuery('#{$id}').timepicker($options);";
...
#5862 report it
falcon at 2011/11/21 04:03am
Excellent for time

I've see the demo from the demo site. It's really cool..

Leave a comment

Please to leave your comment.

Create extension