Logo: Uran web studio
Сделать сайт в Украине

Используем на сайте на Yii framework виджет CJuiDateTimePicker

Виджет CJuiDateTimePicker даст нам возможность удобно и быстро заполнять полях времени/даты, не записывая руками данные, а просто на календарике выбрать нужную нам дату и время.

Использовать это мы можем, например, редактируя товар в админке и указывая дату появления товара на складе.

Для использования виджета CJuiDateTimePicker к сайту, к сайту также должен быть прикручен jQuery, jQuery UI и CSS-файл для него же. Это делается довольно таки просто.

В основном шаблоне(layout) main в header-е мы должны иметь такие строки:

Yii::app()->clientScript->registerScriptFile ( Yii::app()->getAssetManager()->publish ( Yii::app()->getBasePath() . '/extensions/CJuiDateTimePicker/assets/jquery-ui-timepicker-addon.min.js') );
Yii::app()->clientScript->registerCoreScript ( "jquery" );
Yii::app()->clientScript->registerCoreScript ( "jquery.ui" );
Yii::app()->clientScript->registerCssFile ( Yii::app()->clientScript->getCoreScriptUrl() . "/jui/css/base/jquery-ui.css" );

А в виде (view) мы имеем:

$this->widget ( 'application.extensions.CJuiDateTimePicker.CJuiDateTimePicker', array (
                        'name' => 'Item[date]',
                        'mode' => 'date', // use "time", "date" or "datetime" (default)
                        'options' => array (
                            'timeFormat' => 'hh:mm:ss',
                            'dateFormat' => 'yy-mm-dd',
                            'closeText' => 'Закрити',
                            'monthNames' => array ( 'Січень','Лютий','Березень','Квітень','Травень','Червень', 'Липень','Серпень','Вересень','Жовтень','Листопад','Грудень' ),
                            'monthNamesShort' => array ( 'Січ','Лют','Бер','Кві','Тра','Чер', 'Лип','Сер','Вер','Жов','Лис','Гру' ),
                            'dayNames' => array ( 'неділя','понеділок','вівторок','середа','четвер',"п`ятница",'субота' ),
                            'dayNamesShort' => array ( 'нед','пнд','втр','срд','чтв','птн','сбт' ),
                            'dayNamesMin' => array ('Нд','Пн','Вт','Ср','Чт','Пт','Сб' ),
                            'weekHeader' => 'Не',
                            'firstDay' => 1,
                            'isRTL' => false,
                            'showMonthAfterYear' => false,
                            'yearSuffix' => ''
                        ),
                        'htmlOptions' => array ( 'size' => '16' ),
                        'value' => $filter_date ? $filter_date : null
                    ));

Так как я не добился за короткие сроки отображения виджета на нужном украинском языке, то я прописал это в параметрах конфигурации при создании виджета, это массивы: monthNames, monthNamesShort, dayNamesShort, dayNamesMin.

Да, а также в виде я отключаю ненужное мне:

Yii::app()->clientScript->scriptMap['jquery.ba-bbq.js'] = false;
Yii::app()->clientScript->scriptMap['jquery.yiigridview.js'] = false;
Yii::app()->clientScript->scriptMap['jquery-ui-i18n.min.js'] = false;
Yii::app()->clientScript->scriptMap['jquery.yiiactiveform.js'] = false;
Yii::app()->clientScript->scriptMap['jquery-ui-timepicker-addon.min.js'] = false;

И в результате я получаю удобный виджет для выбора даты и времени :)


Теги: Yii CJuiDateTimePicker
2014-02-07

И еще полезные примеры JavaScript

Удалить елементы на странице по имени класса

Почему рассылки попадают в спам

вверх