Yii 1.1: ejuidatetimepicker

EJuiDateTimePicker a date picker where you can also pick the time
31 followers

EJuiDateTimePicker is an extension of CJuiDatePicker. It extends the datepicker with the possibility to also set the time. Time is set using two sliders. The extension uses the datetimepicker addon developed by Trent Richardson.

Requirements

Yii 1.1.4 or above

Installation

Unpack the code in protected/extensions

Usage

<?php 
$this->widget('application.extensions.timepicker.EJuiDateTimePicker',array(
    'model'=>$model,
    'attribute'=>'calev_start',
    'options'=>array(
        'hourGrid' => 4,
        'hourMin' => 9,
        'hourMax' => 17,
        'timeFormat' => 'h:m',
        'changeMonth' => true,
        'changeYear' => false,
        ),
    ));  
?>

Versions

  • 1.0 2010-11-12 - Initial release
  • 1.1 2010-11-20 - Various small changes as requested
  • 1.2 2010-11-24 - Various small changes as requested

Total 13 comments

#12632 report it
Marcolini at 2013/04/02 12:10pm
AM/PM Option

If you want AM/PM option instead of 24hours, just put the option "ampm" like this example:

$this->widget('application.extensions.timepicker.EJuiDateTimePicker',array(
            'model'=>$model,
            'attribute'=>'BEGIN_TIME',
            'language' => 'pt-BR',
            'options'=>array(
                'showAnim'=>'slide',
                'showSecond'=>true,
                'ampm'=>true,
                'timeFormat' => 'hh.mm.ss.000000 tt',
                'dateFormat'=>'dd-M-y',
                'changeMonth' => true,
                'changeYear' => true,
            ),
));
#12030 report it
memsis at 2013/02/21 11:51am
Flat option works. But there is a problem with the time when using it.

I can confirm that the flat option works. I'm using it.

$this->widget('EJuiDateTimePicker',array(
                'model'=>$model, 
                'attribute'=>'tsDebut',
                'mode'=>'datetime',
                'flat'=>true,
                'options'=>array(
                            'timeFormat'=>'hh:mm:ss',
                            'dateFormat'=>'yy-mm-dd'
                        )
            ));

But there is a problem when using the flat option. When you're not using it, the widget takes his data from the form field when you click in the field. When the flat option is used, the widget have to be set with either default values (current date and time) or by giving a value to the attribute.

The widget sets the date with no problem, but the time is still set at the current time, and not at the ont set in the attribute value.

Why ? Because the extension don't use the attribute value to set the time.

Here is what you see, starting at line 84 :

//set now time..
$this->options['hour']   = date('H');
$this->options['minute'] = date('i');
$this->options['second'] = date('s');

Here is the change I made so the widget can use the time set in the attribute :

//set now time..
            $attribute = $this->attribute;
            if($this->model->$attribute==NULL){
                $this->options['hour']   = date('H');
                $this->options['minute'] = date('i');
                $this->options['second'] = date('s');
            }else{
                $this->options['hour']   = date('H',strtotime($this->model->$attribute));
                $this->options['minute'] = date('i',strtotime($this->model->$attribute));
                $this->options['second'] = date('s',strtotime($this->model->$attribute));        
            }

This is probably not the better version of this, but it works.

#7741 report it
Tibor Katelbach at 2012/04/13 11:20am
2 x EJuiDateTimePicker , go from one to the other

Hi I have 2 EJuiDateTimePicker in a form start and end dates they both work fine I only have an issue when I go directly from one to the other, the 2nd doesn't open when I click done that works well or outside the input as well but from input 1 to input 2 , wont work has anybody else had this ? is there a solution ? or is it just my use case ?

#7124 report it
jerome nicholas at 2012/02/25 05:22am
great tool

wow nice tool, i'm playing with it for a while.. pretty good :) hours only, minutes only, only the timepart, many variations anyone want help uv to help!

great job

you may need to install some css http://jqueryui.com/download

jerome nicholas programmer/analyst http://shalomsoftware.com.au

#6816 report it
Borales at 2012/02/07 05:14am
Flat option

Seems that "flat" option doesn't work here

#5574 report it
Roman Solomatin at 2011/10/21 10:53am
Thank you

This extension made my day.

#4373 report it
WallTearer at 2011/06/30 11:35am
Awesome plugin

Thanks a lot for the plugin. I spent some time for customizing, and now, in a short time, I have a very powerful functionality. If somebody tries to find the way, how to display date and time format according to locale, here is how I made it:

in the view:

$this->widget('application.extensions.timepicker.EJuiDateTimePicker',array(
                'model'=>$model,
                'attribute'=>'STARTDATE',
                'options'=>array(
                    'hourGrid' => 6,
                    'minuteGrid' => 15,
                    'dateFormat'=>Yii::app()->params['dateformat_map'][Yii::app()->locale->dateFormat],
                    'timeFormat'=>Yii::app()->params['dateformat_map'][Yii::app()->locale->timeFormat],
                    'ampm' => ( strpos(Yii::app()->locale->timeFormat, 'a') === false ? false : true )
                )
            ))

and in config/main.php:

return array(
.................   
    // application-level parameters that can be accessed
    // using Yii::app()->params['paramName']
    'params' => array(
        // map of Yii::app()->locale->dateFormat and js datepicker dateformat
        'dateformat_map' => array(
        'MMM d, y' => 'M d, yy', // locale en date
        'h:mm:ss a' => 'h:mm:ss TT', // locale en time
        'dd.MM.yyyy' => 'dd.mm.yy', // locale ru date
        'H:mm:ss' => 'h:mm:ss' // locale ru time
    )
    ),
.................   
 
);
#3908 report it
qwerty at 2011/05/19 10:35pm
Widget factory

Hi,

registerCssFile and registerScriptFile should be in the condition if we plan to use CWidgetFactory:

public function init()
{
    parent::init();
    // Register the extension script and needed Css - different $baseUrl from the zii stuff
    $path = pathinfo(__FILE__); // changed to enable various extension Paths - GOsha
    $basePath = $path['dirname']. '/assets';        
    $baseUrl=Yii::app()->getAssetManager()->publish($basePath);
    $cs=Yii::app()->getClientScript();
    if($this->cssFile)
        $cs->registerCssFile($baseUrl.'/'.$this->extraCssFile);
    // NOTE CJuiWidget registers the ui js at POS_END so we should too, otherwise the inclusion order is wrong
    if($this->scriptFile)
        $cs->registerScriptFile($baseUrl.'/'.$this->extraScriptFile, CClientScript::POS_END);
}
#3474 report it
intel352 at 2011/04/14 10:39am
Works well

The date/time picker works well. Glad you chose to extend the existing DatePicker. Chose this extension over the other timepicker ext for that reason.

Cheers

#2830 report it
ejac at 2011/02/14 09:36pm
Nice nice Nice

This one is a nice extension...

#2486 report it
donlemmings at 2011/01/09 01:04pm
RE: save / update : Mysql db

It works. Sorry I forgot to add rules for the field date in my model object.

array('date', 'required'),

Now, its perfect, this extension Rulez ;)

#2270 report it
GOsha at 2010/12/05 05:51am
@srigi

2 srigi:
Add js: before function not to convert it into option. And see CJavaScript.encode() source & docs.

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model'=>$model,
    'attribute'=>'to',
    'options'=>array(
        // some options...
        'beforeShow'=>'js:function(){
            // some code
        }',
    )
));

If you want to set format see additional options in official addon site: http://trentrichardson.com/examples/timepicker/

'showAnim'=>'fold',
                          'showOn'=>'button',
                          'buttonImage'=>$this->module->shared.'/img/calendar20.png',
                          'dateFormat'=>'yy-mm-dd',
                          'timeFormat'=>'hh:mm',
                          'showHour'=>false,
                          'showMinute'=>false,
                          'hour'=>date('H'),
                          'minute'=>date('i'),
#2243 report it
srigi at 2010/12/01 04:53am
callbacks

Once again posting about callbacks. @mbetel thank for link. But there is some problem I cannot go around. Lets have this code:

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
    'model'=>$model,
    'attribute'=>'to',
    'options'=>array(
        // some options...
        'beforeShow'=>'function(){
            // some code
        }',
    )
));

As you can see, I got my callback function form of string. This wrong, cos it leads to JS code, where callback is also in form of string.

jQuery('#selector').datepicker({ /*some options*/, 'beforeShow'=>'function(){}' });

What I need, is direct definition of callback function.

jQuery('#selector').datepicker({ /*some options*/, 'beforeShow'=>function(){} });

But I canno figure how to write this on PHP side. Direct writing of function definition leads in syntax error on PHP side. Any ideas?

Leave a comment

Please to leave your comment.

Create extension