datetimepicker

Yii Framework Extensions

Createnew extension

Popular Tags

datetimepicker datetime picker input widget

Requirements
Usage
Resources

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

Requirements ¶

Yii framework with Zii lib.

Usage ¶

extract to extensions folder.

put next code into view:

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

Resources ¶

39 3

40 followers

14 393 downloads

Yii Version: 1.1

License: BSD-2-Clause

Category: Date and Time

Tags: datetime, input, widget

Developed by: Hit Shappens

Created on: May 4, 2011

Last updated: 13 years ago

Downloads

CJuiDateTimePicker.zip

show all

Related Extensions

User Contributed Notes 23

#3775

9 0

Default to "Chinese Traditional" characters even though regional = "en_us"

So I noticed something odd with the extension but I highly suspect CJuiDatePicker is also affected.
With the default settings, language is default to "en_us"
The end result is that it will show DateTimePicker in Chinese characters.
On the other hand, if I set language => '' (like below), DateTimePicker displays the language correctly (in English of course)

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

Since I don't want to force English language all the time, I ended up modifying the extension inside run() at line 47. That way, it will display the language correctly, and at the same time, reduce the need to load i8n script.

if (isset($this->language) && $this->language != 'en_us'){
			$this->registerScriptFile($this->i18nScriptFile);
....
}

antonywu at May 7, 2011, 1:29:09 PM

#3805

0 0

dupe ?

What advantage over the existing plugin ?

http://www.yiiframework.com/extension/timepicker

ianaré at May 9, 2011, 8:12:10 AM

#3808

2 0

Different Design Approach

@ianare Well, interesting that you mentioned about the other plugin. Here are some major differences

DateTimePicker inherits from Zii's DatePicker, so the implementation only has three files (compared to the TimePicker which has 21 files..)
The UI interaction is different. For DateTimePicker, you can click in the field, and the UI would pop up right away. With TimePicker, I would need to click on that "..." button in order to show the UI.
Finally, thanks to Zii, DateTimePicker supports far more languages than TimePicker does.

Now, it all comes down to your personal preference. For me, with minor changes (see my earlier post), it works like a charm for me.

antonywu at May 9, 2011, 1:38:29 PM

#4169

1 0

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?

dinhtrung at Jun 12, 2011, 2:22:42 PM

#4809

0 0

how to use outside view?

hi,

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

<?php

$yii=dirname(__FILE__).'/../../yii/framework/yii.php';
$config=dirname(__FILE__).'/../protected/config/main.php';
require_once($yii);
// 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');

Yii::import('estensioni.extensions.CJuiDateTimePicker.CJuiDateTimePicker');
?>

[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
~~~

abioneperhobby at Aug 18, 2011, 1:58:15 PM

#4885

0 0

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

aqge at Aug 25, 2011, 9:04:45 AM

#5619

0 0

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?

Kieran at Oct 26, 2011, 3:44:24 AM

#7080

1 0

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

$this->widget('ext.EJuiTimePicker.EJuiTimePicker',
		
                                    array(
                                        'model'=>$model,
                                        'attribute'=>'start_time',
                                        'options' => array(//'changeMonth' => 'true',
                                                            //'changeYear' => 'true',
                                                            //'showButtonPanel' => 'true',
                                                            //'constrainInput' => 'false',
                                                            //'duration'=>'fast',
                                                            //'showAnim' =>'slide',
					    //'showSecond'=>true,
					    
					    'language'=>'pt_br'
					),
                                        'htmlOptions'=>array()
                                    )
			);

Please, what am I missing to get texts translated?

Thanks and regards!

Junior - df9 at Feb 23, 2012, 2:30:08 AM

#7233

0 0

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');		/

Head-Crash at Mar 6, 2012, 10:02:50 AM

#7285

1 0

Спасибо

Спасибо =)

tigo at Mar 10, 2012, 9:46:24 AM

#7688

0 0

translation js

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

[javascript]
	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 :

[javascript]
$.extend(this._defaults, this.regional['fr']);

seb7 at Apr 9, 2012, 10:50:38 PM

#7712

1 0

Re: #7233

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

<?php Yii::import('application.extensions.CJuiDateTimePicker.CJuiDateTimePicker');
		    $this->widget('CJuiDateTimePicker',array(
		        '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"

Patrigan at Apr 11, 2012, 9:29:17 AM

#8490

1 0

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 (
                    'attribute'=>'ricerca_data_a',
                    'model'=>$model,
                    'value' => $model->ricerca_data_a,
                    'options'=>array (
                        'timeFormat'=>strtolower(Yii::app()->locale->timeFormat),
                        'showSecond'=>true,
                    ),  
                )   
            );

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

Maxxer at Jun 7, 2012, 9:17:52 AM

#8514

0 0

there is a later js file that may fix some bugs.

see this
thread

huanito at Jun 9, 2012, 1:27:04 AM

#9927

0 0

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...

yasen at Sep 23, 2012, 2:42:06 PM

#9932

0 0

re:integrated in to the core

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

huanito at Sep 23, 2012, 8:02:33 PM

#11114

0 0

Month picker

any month picker extention like this ?

Finzaiko at Dec 18, 2012, 5:55:07 AM

#14403

0 0

I18

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.

Tropi at Aug 8, 2013, 9:00:30 PM

#14528

0 0

can this be used to only months

can this be used to only months

jerome nicholas at Aug 21, 2013, 3:41:32 AM

#15137

0 0

flat option

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

Slivicon at Oct 10, 2013, 3:03:12 PM

#15254

0 0

Thank God you are the savior antonywu

thaks antonywu

savariya at Oct 21, 2013, 3:10:34 PM

#18784

0 0

i18n Simple solution for English

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

<?php $this->widget ('application.extensions.CJuiDateTimePicker.CJuiDateTimePicker',
	    		array(
			        'model'=>$quote, //Model object
	        		'attribute'=>'dep_time', //attribute name
	                'mode'=>'datetime', //use "time","date" or "datetime" (default)
 					'language'=>'',
		        	'options'=>array(
							'regional'=>'',
						) // jquery plugin options
		    ));
		?>

David Urry at Jan 6, 2015, 6:57:57 PM

#19239

0 0

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'),
)

iefreer at Apr 26, 2015, 2:03:07 AM

Categories