ejuidatetimepicker Follow @yiiframework

EJuiDateTimePicker a date picker where you can also pick the time

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

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

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

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

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

Borales at 2012/02/07 05:14am

Flat option

Seems that "flat" option doesn't work here

#5574

Roman Solomatin at 2011/10/21 10:53am

Thank you

This extension made my day.

#4373

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

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

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

ejac at 2011/02/14 09:36pm

Nice nice Nice

This one is a nice extension...

#2486

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

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

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?

Please login to leave your comment.