This is a wrapper of the excellent JQuery timepicker widget by Frank Galinas
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 */
),
),
//
?>
Excellent for time
I've see the demo from the demo site. It's really cool..
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);"; ...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.
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.