Improving the DateTimePicker Yii Extension

The Yii extension DateTimePicker is a great extension when you want a user to be able to select a date and time within the same popup for an input.  We have recently started to use it extensively for dates & times that occur in future months.  We ran into a problem, however, in that the date would default to today’s date – a real headache for the user.  The root cause of the problem is that the Yii extension’s jQuery files are a few versions behind.  To fix it, you can upgrade the ‘assets’ folder with the new version of Trent Richardson’s jQuery-TimePicker-addon extension.  Here’s a step-by-step:

  1. Download the zipped jQuery-TimePicker-addon from github
  2. Extract the zipped contents into your protected/extensions/timepicker/assets folder
  3. Update the minified jQuery file.  You can either copy the exact same code from the main js file into this file, or you can minify it using one of the many easy-to-use JavaScript minifiers.
  4. Test it out!

Read More

CJuiDatePicker/CActiveForm Yii Framework

 

CJuiDatePicker Example
CJuiDatePicker Example

 

For many of our web applications, we utilize the Yii Framework extensively.  A great feature of the framework is the CActiveForm, which allows you to link up your Model to your View in a very easy manner.  (See Model-View-Controller Architecture on Wikipedia for a good explanation of this concept.)

If you also use the Yii Framework, you might find yourself in a dilemma that we recently experienced.  We had a date field on our form, and wanted to use the CJuiDatePicker widget so that users get a nifty dropdown where they can select a date.  We also wanted to link it to the model, defaulting it to the field in our database if there was already an instance of the object.  Most Yii widgets only need you to link up with the ‘model’ option, but CJuiDatePicker is different.  To default the value, the ‘value’ line below must be used.

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
  'model'=>$model,
  'attribute'=>'StartDate',
  'value'=>$model->StartDate,
  // additional javascript options for the date picker plugin
  'options'=>array(
    'showAnim'=>'fold',
    'showButtonPanel'=>true,
    'autoSize'=>true,
    'dateFormat'=>'yy-mm-dd',
    'defaultDate'=>$model->StartDate,
   ),
));

Do you know of other ways to accomplish this? Let us know in the comments!

Read More