jtimepicker Follow @yiiframework

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

Requirements

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 ¶

Try out a demo

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

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

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

falcon at 2011/11/21 04:03am

Excellent for time

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

Please login to leave your comment.