Simple datetimepicker, updated. Based on http://trentrichardson.com/examples/timepicker/
Requirements ¶
- Yii 1.0 or above
Installation ¶
- Extract the release file
Usage ¶
See the following code example in view:
<?php
$this->widget('widgets.timepicker.timepicker', array(
'model'=>$model,
'name'=>'publicated',
));
?>
default options
$default = array(
'dateFormat'=>'yy-mm-dd',
'timeFormat'=>'hh:mm:ss',
'showOn'=>'button',
'showSecond'=>false,
'changeMonth'=>false,
'changeYear'=>false,
'tabularLevel'=>null,
);
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.
Good widget, but...
Hi!
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?
No 'class="error"'?
By default the form fields get populated with 'class="error"' if there is an error in the field. But the TimePicker field is only populated with 'class="timepicker hasDatepicker"'.
In CJuiDatePicker we can add property 'attribute' to the array but it is not recognised in TimePicker.
traduccion al español
Muchas gracias me fue de gran ayuda!
en timepicker.js
288: html = < tr >< th >Horas</ th >< th > Minutos </ th ></ tr >
el archivo ui.datepicker-ru.js en Español queda así (copiar pegar y listo):
$.datepicker.regional['es'] = { closeText: 'Cerrar', prevText: 'Anterior', nextText: 'Siguiente;', currentText: 'Texto Actual', monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio', 'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'], monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun', 'Jul','Ago','Sep','Oct','Nov','Dic'], dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'], dayNamesShort: ['Dom','Lun','Mar','Mie','Jue','Vie','Sab'], dayNamesMin: ['D','L','M','W','J','V','S'], dateFormat: 'dd.mm.yy', firstDay: 1, isRTL: false}; $.datepicker.setDefaults($.datepicker.regional['es']);});
/ FIN /
Бесподобный виджет
Очень хороший виджет
Cannot change the hour and minute
I have tried to edit the timepicker.js
from:
~~~
288: html += 'Часов ... Минут';
~~~
to:
~~~
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..
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>';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)) Yii::app()->clientScript->registerScriptFile($this->assets.$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: '<zurück', nextText: 'Vor>', currentText: 'heute', monthNames: ['Januar','Februar','März','April','Mai','Juni', 'Juli','August','September','Oktober','November','Dezember'], monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun', 'Jul','Aug','Sep','Okt','Nov','Dez'], 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 }; $.datepicker.setDefaults($.datepicker.regional['de']); $.timepicker.setDefaults($.timepicker.regional['de']);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 ;-)
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.
if($this->dateOnly) $this->options = array_merge($options, array('showTime'=>false, 'showHour'=>false, 'showMinute'=>false, 'showSecond'=>false, 'showButtonPanel'=>false, 'alwaysSetTime'=>false) );This works for me. Maybe the list can be shorter ;-)
Problem
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?
Can't translate to spanish
Hi,
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';or
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
Solved
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.
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'); $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' => '', )); ?> <?php echo $form->error($model,'activity_deadline'); ?> </div>Ukrainian lang file content
[javascript] $.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 }; $.datepicker.setDefaults($.datepicker.regional['ua']); $.timepicker.setDefaults($.timepicker.regional['ua']);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?
Errors
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?
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( 'model'=>$model, 'name'=>'engine_stop', ... )); ?> <?php echo $form->error($model,'engine_stop'); ?> </div>htmlOptions?
How can I set htmlOptions for the form input? Such as size?
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?
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]", ));don't forget start path alias with application
Please update example code.
<?php $this->widget('application.widgets.timepicker.timepicker', array( 'model'=>$model, 'name'=>'publicated', )); ?>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( 'id'=>'takeaway_time', 'model'=>$model, 'name'=>'description[restaurant][days][$day][start]', 'select'=> 'time', 'options' => array( 'showOn'=>'focus', 'timeFormat'=>'hh:mm', //'hourMin'=> (int) $hourMin, //'hourMax'=> (int) $hourMax, 'hourGrid'=>2, 'minuteGrid'=>10, ), )); }or
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; ?>If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.