Yii 1.1: datetimepicker

datetime picker input widget

datetime picker input widget, based on Jui-timepicker-addon


Yii framework with Zii lib.


extract to extensions folder.

put next code into view:

<?php Yii::import('application.extensions.CJuiDateTimePicker.CJuiDateTimePicker');
        'model'=>$news, //Model object
        'attribute'=>'eventDate', //attribute name
                'mode'=>'datetime' //use "time","date" or "datetime" (default)
        'options'=>array() // jquery plugin options


Total 20 comments

#19239 report it
iefreer at 2015/04/25 10:03pm
set default value to current time

you may set default timepicker value in htmlOptions as below: 'htmlOptions'=>array( 'readonly'=>'readonly',
'style'=>'width:160px;text-align:center;', 'value'=>date('Y-m-d h:m'), )

#18784 report it
David Urry at 2015/01/06 01:57pm
i18n Simple solution for English

Both the LANGUAGE and the REGIONAL are necessary in the code below:

<?php $this->widget ('application.extensions.CJuiDateTimePicker.CJuiDateTimePicker',
                    'model'=>$quote, //Model object
                    'attribute'=>'dep_time', //attribute name
                    'mode'=>'datetime', //use "time","date" or "datetime" (default)
                        ) // jquery plugin options
#15254 report it
savariya at 2013/10/21 11:10am
Thank God you are the savior antonywu

thaks antonywu

#15137 report it
Slivicon at 2013/10/10 11:03am
flat option

Support for the datetimepicker "flat" option? http://www.yiiframework.com/doc/api/1.1/CJuiDatePicker#flat-detail

#14528 report it
jerome nicholas at 2013/08/20 11:41pm
can this be used to only months

can this be used to only months

#14403 report it
Tropi at 2013/08/08 05:00pm

To all the people having problems with i18. The easiest way is probably to set the 'language' property in the yii config (/config/main.php). For me (language=de) this comes with the correct translation already.

#11114 report it
Finzaiko at 2012/12/18 12:55am
Month picker

any month picker extention like this ?

#9932 report it
huanito at 2012/09/23 04:02pm
re:integrated in to the core

@yasen As far as I know, the core datepicker doesn't do time, only dates.

#9927 report it
yasen at 2012/09/23 10:42am
Integrated in The Core

This widget has already been integrated into Yii core. It's at 'framework/zii/widgets/jui/CJuiDatePicker.php'

So the opening line would be

$this->widget('zii.widgets.jui.CJuiDatePicker', array(

Edit: Oops. Yes this is a different widget...

#8514 report it
huanito at 2012/06/08 09:27pm
there is a later js file that may fix some bugs.

see this thread

#8490 report it
Maxxer at 2012/06/07 05:17am
showing seconds...

I managed to show seconds... It was a little trouble because even if the locale was set correctly, the widget wasn't displaying them! At first you need the showSeconds: true option, but sadly that's not enough! The full widget code is this:

$this->widget ('CJuiDateTimePicker',  
                array (
                    'value' => $model->ricerca_data_a,
                    'options'=>array (

sadly without the timeFormat option it won't correctly show them in the input field!

#7712 report it
Patrigan at 2012/04/11 05:29am
Re: #7233

I've found a simple, but not so pretty workaround to the language issue.

<?php Yii::import('application.extensions.CJuiDateTimePicker.CJuiDateTimePicker');
                'model'=>$model, //Model object
                'attribute'=>'start', //attribute name
                'mode'=>'datetime', //use "time","date" or "datetime" (default)
                'options'=>array("dateFormat"=>'yy/mm/dd'), // jquery plugin options
                'language' => ''

This should show English text and a DateTime formatted as: "2012/04/11 12:00"

#7688 report it
seb7 at 2012/04/09 06:50pm
translation js

You need 2 modifications to add a translation : in jquery-ui-timepicker-addon.js , function Timepicker() 1-Add the translation like

this.regional['fr'] = {
        currentText: 'Maintenant',
        closeText: 'Ok',
        ampm: false,
        timeFormat: 'hh:mm tt',
        timeOnlyTitle: 'Choisir heure',
        timeText: 'Horaire',
        hourText: 'Heure',
        minuteText: 'Minute',
        secondText: 'Seconde',
        timezoneText: 'Time Zone'

then register it at the end of the function :

$.extend(this._defaults, this.regional['fr']);
#7285 report it
tigo at 2012/03/10 04:46am

Спасибо =)

#7233 report it
Head-Crash at 2012/03/06 05:02am
Default to "Chinese Traditional" characters even though regional = "en_us" / time convert is necessary

antonywu´s workaround...

if (isset($this->language) && $this->language != 'en_us'){

...works great and there´s no more need to force english language all the time. Thanks a lot! But the output string differs from original one instead of using default CJuiDateTimePicker settings:

  • old string: yyyy/mm/dd hh:mm
  • new string: mm/dd/yyyy hh:mm

I recommend to convert the string to an unix time stamp because it´s easier to handle. The necessary command should be:

$this->start_time = CDateTimeParser::parse($this->start_time,'MM/dd/yyyy HH:mm');       /
#7080 report it
Junior - df9 at 2012/02/22 09:30pm
Internationalization problem

Hi, tks for the extension!

I'm trying to show "hours", "minutes", "seconds" texts in a language different from "en"

I've created the proper array in the js file as

this.regional['pt_br'] = { // pt-br
        currentText: 'Agora',
        closeText: 'Feito',
        ampm: true,
        timeFormat: 'hh:mm:ss tt',
        timeOnlyTitle: 'Escolher horário',
        timeText: 'Horário',
        hourText: 'Horas',
        minuteText: 'Minutos',
        secondText: 'Segundos',
        timezoneText: 'Fuso'

but only the calendar gets translated when I set the widget as

                                        'options' => array(//'changeMonth' => 'true',
                                                            //'changeYear' => 'true',
                                                            //'showButtonPanel' => 'true',
                                                            //'constrainInput' => 'false',
                                                            //'showAnim' =>'slide',

Please, what am I missing to get texts translated?

Thanks and regards!

#5619 report it
Kieran at 2011/10/25 11:44pm
re: #4885

I also dont get the times displaying. Is this something with the new version of Yii or something thats stopping this from working?

#4885 report it
aqge at 2011/08/25 05:04am
i don see the times

how come i dont see the time input, only date exists? i ve seen the original Ui.js istwork but this CJUI didtn

#4809 report it
abioneperhobby at 2011/08/18 09:58am
how to use outside view?


i want to use this widget outside a view so $this-> don't work.

i'm able to import the widget, but i'm not able to load it.

can you explain me please?

my code

// remove the following lines when in production mode
defined('YII_DEBUG') or define('YII_DEBUG',true);
// specify how many levels of call stack should be shown in each log message
defined('YII_TRACE_LEVEL') or define('YII_TRACE_LEVEL',3);
Yii::setPathOfAlias('estensioni', dirname(__FILE__).'/../protected');

[php] <?php $this->widget('CJuiDateTimePicker',array( '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' => '', )); ?>

i obtain

Fatal error: Using $this when not in object context in /var/www/tasker/task/task-new.php on line 20

#4169 report it
dinhtrung at 2011/06/12 10:22am
The JS is fixed with dateformat + separator + timeformat. How can I change?

In Vietnamese, the date time usually goes with : hh:ii:ss dd/mm/yy. I dive into the js code, and found out that there is no way I could change the order of date and time through configuration.

I use DateTimeI18Behavior to parse the date and time string, and the format ship with Yii is correct, but I cannot make the JQuery plugin to change to this format.

How can I convert the input format to correct output one?

Leave a comment

Please to leave your comment.

Create extension