Yii 1.1: timepicker

Simple date time picker,

Simple datetimepicker, updated. Based on http://trentrichardson.com/examples/timepicker/


  • Yii 1.0 or above


  • Extract the release file


See the following code example in view:

$this->widget('widgets.timepicker.timepicker', array(

default options

$default = array(

Change Log

March 23, 2011

  • Added tabularLevel in options
  • Added swedish (SE) translation file written by Henrik Engman (info@ehenrik.com)

March 1, 2011

  • Added language support, DE translation file written by Milian Wolff (mail@milianw.de)

Feb 28, 2011

  • Updated js, now based on http://trentrichardson.com/examples/timepicker/

April 16, 2010

  • Initial release.

Total 20 comments

#13988 report it
albertski at 2013/07/10 10:04pm
Use with out $model

I needed to use the timpicker without a $model. I updated default.php to allow this.

<?php if(isset($model)): ?>
<input type="text" class="timepicker" id="<?php echo $this->id; ?>" value="<?php echo $this->model->{$this->name}?$this->model->{$this->name}:$this->options['value']; ?>" name="<?php echo get_class($this->model).(!empty($this->options['tabularLevel'])?$this->options['tabularLevel']:'').'['.$this->name.']'; ?>" />
<?php else: ?>
  <input type="text" class="timepicker" id="<?php echo $this->id; ?>" value="<?php echo $this->options['value']; ?>" name="<?php echo $this->name; ?>" />
<?php endif; ?>
#10562 report it
MPeli at 2012/11/05 05:16am
Using without $model

Is is possible to use the widget with parameter "name" set to array? Or without $model?

I would like to generate dynamically a set of timepickers of unknown quantity.

foreach($days as $day) {
    $this->widget('application.extensions.timepicker.timepicker', array(
            'select'=> 'time',
            'options' => array(
                //'hourMin'=> (int) $hourMin,
                //'hourMax'=> (int) $hourMax,


#10295 report it
Stageline at 2012/10/18 03:22am
don't forget start path alias with application

Please update example code.

$this->widget('application.widgets.timepicker.timepicker', array(
#9639 report it
Rajith R at 2012/08/31 06:05am
tabular input in diffrent style.. attribute as an array

Thanks ianare

i changed it like this , to meet my need.. attribute as an array

class timepicker, add

public $tabularLevel;

default view,

change the name :

name="<?php echo get_class($this->model).'['.$this->name.']'.$this->tabularLevel; ?>"

init like so :

in a for loop with $i

$this->widget('ext.timepicker.timepicker', array(
      'model' => $model,
      'name' => "attribute",
      'tabularLevel' => "[$id]",
#9539 report it
huanito at 2012/08/22 02:44am
any chance of a new version with a update of Trents's code

This is a great extension, however Trent Richardson's time picker has been updated several times since the version in the extension and has now reached version 1.0.1 This may fix many of the minor interface bugs from the original version 0.95-dev (iirc). Here is a related thread.

Any chance that Tigo might read this and be able to release an update?

#6793 report it
petruza at 2012/02/05 01:36pm

How can I set htmlOptions for the form input? Such as size?

#6432 report it
rei at 2012/01/10 02:25am
Error Validation

Like GSTAR said in his comment (No 'class="error"'?), the timepicker doesn't populate 'error' class when related field/attribute is invalid. This means timepicker textfield's color won't turn red when it is invalid. To solve this without modifying the extension itself, I just change form.css file a little:

div.form textarea.error,
div.form select.error,
div.form label.error + input.hasDatepicker
   background: #FEE;
   border-color: #C00;

Note: This approach only works if you have label that is adjacent to the timepicker like:

<div class="row">
   <?php echo $form->labelEx($model,'engine_stop'); ?>
   <?php $this->widget('application.extensions.timepicker.timepicker', array(
   )); ?>       
  <?php echo $form->error($model,'engine_stop'); ?>
#5810 report it
marcovtwout at 2011/11/15 11:45am

If you include multiple instances you will run into javascript errors complaining about a stack overflow. Fix is mensioned here but not in the GIT repo yet: http://trentrichardson.com/2011/07/29/many-updates-to-timepicker/comment-page-1/#comment-33005

@plugin: It does the job, but should be updated to be used for CForm ($attribute property missing) and lacks commmenting. Author, maybe take a look at the CJuiDatePicker and extend that one?

#5584 report it
Charger at 2011/10/21 04:56pm
Strange rectangle

When I use this wiget, on bottom of page exist empty rectangle. After open timepicker he is disappear. How do I fix it?

Empty bar

#5041 report it
Andrey Geonya at 2011/09/09 04:59am
Ukrainian lang file content
$.datepicker.regional['ua'] = {
    closeText: 'Закрити',
    prevText: '<Попер',
    nextText: 'Наст>',
    currentText: 'Сьогодні',
    monthNames: ['Січень','Лютий','Березень','Квітень','Травень','Червень',
    monthNamesShort: ['Січ','Лют','Бер','Квіт','Трав','Чер',
    dayNames: ['неділя','понеділок','вівторок','середа','четвер','п\'ятниця','субота'],
    dayNamesShort: ['нед','пон','вівт','сер','чет','п\'ят','суб'],
    dayNamesMin: ['Нд','Пн','Вт','Ср','Чт','Пт','Сб'],
    weekHeader: 'Тиж',
    dateFormat: 'dd-mm-yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
$.timepicker.regional['ua'] = {
    timeOnlyTitle: 'Оберіть час',
    timeText: 'Час',
    hourText: 'Години',
    minuteText: 'Хвилини',
    secondText: 'Секунди',
    currentText: 'Зараз',
    closeText: 'Закрити',
    ampm: false
#4755 report it
abioneperhobby at 2011/08/11 12:53pm
embed inside crud generated page

i use gii crud to genereate form.

i want to replace text field for date field with your calendar.

so you need to do (my model is Activiy)

<div class="row">
        <?php echo $form->labelEx($model,'activity_deadline'); ?>
        <?php Yii::import('application.extensions.CJuiDateTimePicker.CJuiDateTimePicker');
         'model'=>Activity::model(), //Model object
         'attribute'=>'activity_deadline', //attribute name
         'mode'=>'datetime', //use "time","date" or "datetime" (default)
         'options'=>array('dateFormat'=>'yy-mm-dd'), // jquery plugin options
         'language' => '',
        <?php echo $form->error($model,'activity_deadline'); ?>
#4741 report it
Jose H. Milán at 2011/08/10 10:43am

Ok, it's done.

The problem was a "non-refreshing asset". My script wasn't published. Now it's working well.

It's possible to contact with the creator of that extension via email?

Thank you.

#4740 report it
Jose H. Milán at 2011/08/10 09:16am
Can't translate to spanish


I've downloaded jquery.ui.datepicker-es.js form http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/ but it's imposible. Well, I have done some changes: *in my /protected/config/main.php

'sourceLanguage'    =>'en_US',
    'language'          =>'es',

*in timepicker/timepicker.php i've tried a lot of thing (with language variable, and so), finally i have this line:

Yii::app()->clientScript->registerScriptFile( $this->assets.'/js/jquery.ui.datepicker-es.js' );

Just before

$default = array(

(By the way, I traced Yii::App()->language and it's setted correctly)

What am i doing bad? If I do the next changes in timepicker.php

public $language='ru';

It works fine (in russian, obviously) Similar results with

public $language='de';


public $language='se';

But it doesn't work with

public $language='es';

(to do this test I've tried to rename jquery.ui.datepicker-es.js to jquery.ui.datepicker.es.js, and nothing.

I'm stuck, any idea?

Thx so much

#4475 report it
StErMi at 2011/07/12 08:48am

Got this problem trying to use it ( extracted in extrension folder ):

Alias "widgets.timepicker.timepicker" is invalid. Make sure it points to an existing directory or file.

What have I to do?

#3388 report it
Joblo at 2011/04/08 10:45am
dateOnly feature

I have a problem when I want to use 'timepicker' as 'datepicker' only.

When I add showTimepicker=>false to the options, the display is ok, but the input field is not filled with date.

It works, when I add a long list to the options. Is there a simple solution for this problem?

If not, it would be nice to add a 'dateOnly' public property.

   $this->options = array_merge($options, 

This works for me. Maybe the list can be shorter ;-)

#3162 report it
ianaré at 2011/03/23 06:08am
tabular form support

Using your extension and it works great, but I needed tabular form support.

Here are the modifications :

class timepicker, add

public $tabularLevel;

default view, change the name :

name="<?php echo get_class($this->model).$this->tabularLevel.'['.$this->name.']'; ?>"

init like so :

$this->widget('ext.timepicker.timepicker', array(
      'model' => $model,
      'name' => "attribute",
      'tabularLevel' => "[$id]",

Thanks for the extension, saved me the burden of doing it ;-)

#2945 report it
Joblo at 2011/02/28 01:04pm
Language support

I have tested your updated timepicker. It works better with language support.

It would be nice to add direct language support in the widget too. Please add the following code to your extension:

public $language;
public function init() {
  //language support
        if (empty($this->language))
            $this->language = Yii::app()->language;
        if (!empty($this->language))
            $path = dirname(__FILE__).DIRECTORY_SEPARATOR.'assets';
            $langFile = '/js/jquery.ui.timepicker.'.$this->language.'.js';
            if (is_file($path.DIRECTORY_SEPARATOR.$langFile))

Here is the code for jquery.ui.timepicker.de.js:

/* German initialisation for the jQuery UI date picker plugin. */
/* Written by Milian Wolff (mail@milianw.de). */
$.datepicker.regional['de'] = {
    closeText: 'schließen',
    prevText: '&#x3c;zurück',
    nextText: 'Vor&#x3e;',
    currentText: 'heute',
    monthNames: ['Januar','Februar','März','April','Mai','Juni',
    monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
    dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
    dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
    dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
    weekHeader: 'Wo',
    dateFormat: 'dd.mm.yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''};
$.timepicker.regional['de'] = {
    timeOnlyTitle: 'Zeit wählen',
    timeText: 'Zeit',
    hourText: 'Stunde',
    minuteText: 'Minute',
    secondText: 'Sekunde',
    currentText: 'Aktuelle Zeit',
    closeText: 'Schließen',
    ampm: false
#2834 report it
tigo at 2011/02/15 12:51am
Cannot change the hour and minute

You may replace ui.datepicker-ru.js by http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-en-GB.js and

Yii::app()->clientScript->registerScriptFile( $this->assets.'/js/jquery.ui.datepicker-en-GB.js' );

and in assets/js/timepicker.js

288: html += '<tr><th>Hour</th><th>Мinute</th></tr>';
#2827 report it
ejac at 2011/02/14 09:02pm
Cannot change the hour and minute

I have tried to edit the timepicker.js


288: html += 'Часов ... Минут';


288: html += 'Hour ... Мinute';

Still doesn't work.. The same thing is still appearing the Часов and Минут.

Can anybody help??

Thanks! By the way its a great extension its just I don't know how to translate it in english..

#150 report it
Au1 at 2010/08/26 07:55am
Good widget, but...


I have just fixed some problem with extension timepicker.

Look, it renders as . If input has own style with margin, but button hasn't, it will render bad in IE and Opera.

For example, default form.css in Yii have this:

[code]div.form input { margin: 0.2em 0 0.5em 0;}[/code]

I added this code to /assests/.../css/smootheness/jquery-ui-1.7.2.custom.css:

[code].ui-datepicker-trigger {vertical-align: top; margin: 0.2em 0 0.5em 0;}[/code]

where vertical-align is not nessesary, but margin must be same as in input.

Yes, it's not good solution, but it works in my case. Can anyone do it better?

Leave a comment

Please to leave your comment.

Create extension