How to format dates with DatePicker in Yii-Booster?

Question

Background

YiiBooster's Date Picker is a wrapper for a neat little widget (bootstrap-datepicker) which is based on Stefan Petre's bootstrap-datepicker. It is very similar to, but not the same as JQueryUI's DatePicker.

Problem

Date format! All of these widgets take a value and display it both in an input field and a nice graphical calendar. The problem is that the date format we want to display to the end-user is usually not the same as the format used by the underlying database. A database like MySQL will typically store it in something like INT (Unix timestamp) or DATE or DATETIME or TIMESTAMP, while the end-user should see a specific format, depending on localization.

YiiBooster's Date Picker takes the raw value directly from the database and displays it in the input field. This is obviously unacceptable, especially when we are storing the date as a Unix timestamp.

With JQueryUI's DatePicker this is easily resolved by specifying the altFormat and altField options. YiiBooster's widget however does not support these parameters.

Question

What is the best practice for overcoming this issue in Yii? Note that importing JQueryUI's DatePicker is not an option, because it is not visually compatible with Twitter Bootstrap.

Answer 1

What format do you want? Deafult in YiiBooster DatePicker is yyyy-mm-dd hh:mtmt:ss. You can use afterFind function to do that. Here I got you an example:

protected function afterFind(){
parent::afterFind();

//this will change format to dd month's name year
$this->attribute=date('d F, Y',strtotime(str_replace("-", "", $this->attribute)));       
}

Just put it in your Model. Hope this help. CMIIW

Answer 2

We had this problem in our application.

mysql: Y-m-d
yiibooster: m/d/Y

Of course we prefer mysql format. We do not want the conversion overload of / to -, we want every datetime in mysql format.

Since we have many modules and too much date and datetime fields in too many forms, it was not a good practice to force developers to change each of them separately, so we have added these lines in our main layout file:

\Yii::app()->getClientScript()->registerScript("jquery-date-fix",
"
if($.fn.datepicker){
    $.fn.datepicker.defaults.format = 'yyyy-mm-dd';
    $.fn . datepicker . defaults . autoclose = true;
}
",
\CClientScript::POS_HEAD);

In this way, all the date and datetime fields are working with mysql date format rather than that god damn / format.

we simply use the widget like:

echo $form->datePickerGroup($manageForm, 'dateOfHire', [
    'wrapperHtmlOptions' => [
        'class' => 'col-sm-5'
    ],
    'widgetOptions' => [
        'options' => [
            'startView' => 2,
            'changeMonth' => true,
            'changeYear' => true,
            'yearRange' => "-100:+0",
            'language' => 'us',
            'autoclose' => true,
            'todayHighlight' => true,
        ],
    ],
    'groupOptions' => [
        'class' => 'col-sm-6',
    ],
    'append' => '<label for="' . $manageForm->getId() . '_dateOfHire" class="glyphicon glyphicon-calendar"></label>',
]);

No additional conversion in forms is needed.