О том как я календарь прикручивал

Обсуждение документации. Переводы Cookbook и авторские рецепты.
Аватара пользователя
aser
Сообщения: 167
Зарегистрирован: 2009.04.02, 14:25
Откуда: Киев

О том как я календарь прикручивал

Сообщение aser »

Вот понадобилось прикрутить календарик к полю с датой, и решил выложить может кому жизнь облегчит :P
Таким способом можно прикрутить любое из расширений JQ да и JS

Для начала я скачал старый добрый Datepicker с http://jqueryui.com/demos/datepicker/#default
Перенес файлы с архива в проект, каталог вышел такой:

Код: Выделить всё

/js/
   jquery_ui/
      datepicker/
         i18n/
            jquery-ui-i18n.js
            ui.datepicker-ru.js
         images/
            ui-bg_flat_0_aaaaaa_40x100.png
            ui-bg_flat_75_ffffff_40x100.png
            .....
            ui-icons_cd0a0a_256x240.png
         ui.datepicker.css
         ui.datepicker.js
      ui.core.js
Потом в VIEW формы где нужно было мне вставить календарь в самом верху вставил следующий код:

Код: Выделить всё

<?php
    $cs=Yii::app()->clientScript;
    /* Подключаем css календаря */
    $cs->registerCSSFile(Yii::app()->request->baseUrl.'/js/jquery_ui/datepicker/ui.datepicker.css', CClientScript::POS_HEAD);
    /* Регистрируем библиотеку JQuery, она идет в поставки с фреймворком, хранится в недрях папки assets проекта */
    $cs->registerCoreScript('jquery');
    /* Для работы UI регистрируем корневую библиотеку */
    $cs->registerScriptFile(Yii::app()->request->baseUrl.'/js/jquery_ui/ui.core.js', CClientScript::POS_HEAD);
    /* Регистрируем библиотеку datepicker */
    $cs->registerScriptFile(Yii::app()->request->baseUrl.'/js/jquery_ui/datepicker/ui.datepicker.js', CClientScript::POS_HEAD);
    /* Регистрируем языковый файл, что бы все было по русски */
    $cs->registerScriptFile(Yii::app()->request->baseUrl.'/js/jquery_ui/datepicker/i18n/ui.datepicker-ru.js', CClientScript::POS_HEAD);
    /* Ну и добавляем скриптик, ктоторый определяет языковый пакет и запускает календарь */
    $script = '$(function() {'."\n";
    $script .= '$.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional[\'\']));'."\n";
    /* Не забываем менять ID поля ;) */
    $script .= '$("#Articles_Date").datepicker($.datepicker.regional[\'ru\']);'."\n";
    $script .= '});'."\n";
    /* datepicker_init_local - Это идентификатор куска JS который мы добавляем*/
    $cs->registerScript('datepicker_init_local', $script, CClientScript::POS_BEGIN);
?>
Теперь при нажатии на поле с датой у нас появится календарь.
Наверное стоит упомянуть что CClientScript::POS_HEAD будет добавлен перед тегом </heaer>, а CClientScript::POS_BEGIN после тега <body>
Аватара пользователя
Ozzy
Сообщения: 269
Зарегистрирован: 2009.04.02, 15:09
Откуда: Украина, Одесса

Re: О том как я календарь прикручивал

Сообщение Ozzy »

Только недавно занимался похожей фигней)
За заметку спасибо =) Только вам скорее в cookbook чем в авторский код
Мой маленький блог - http://dbhelp.ru
Аватара пользователя
aser
Сообщения: 167
Зарегистрирован: 2009.04.02, 14:25
Откуда: Киев

Re: О том как я календарь прикручивал

Сообщение aser »

Спасибо что перенесли )
TM123
Сообщения: 608
Зарегистрирован: 2011.06.09, 11:18

Re: О том как я календарь прикручивал

Сообщение TM123 »

Только лучше делать

$cs->registerCSSFile(Yii::app()->request->baseUrl.'/js/jquery_ui/datepicker/ui.datepicker.css');

иначе CSS не подключится :)
valkiriy
Сообщения: 58
Зарегистрирован: 2010.05.25, 08:32

Re: О том как я календарь прикручивал

Сообщение valkiriy »

ох и подняли старую тему)) не парьтесь http://www.yiiframework.com/doc/api/1.1/CJuiDatePicker/ )) а то еще новички начнут мутить похожее..
Ekstazi
Сообщения: 1428
Зарегистрирован: 2009.08.20, 22:54
Откуда: Молдова, Бельцы
Контактная информация:

Re: О том как я календарь прикручивал

Сообщение Ekstazi »

+1.
kennobi
Сообщения: 7
Зарегистрирован: 2012.02.03, 14:09

Re: О том как я календарь прикручивал

Сообщение kennobi »

Уважаемые коллеги!
Может мне кто-нибудь посоветовать, как сделать маску в CJuiDatePicker. Тоесть. Когда пользователь в окошке ввода ручками вбивает дату, чтобы она автоматически точками форматировалась и не допускался ввод, к примеру года как 2000012 вместо 2012, или четырехзначного числа месяца)) или дня больше чем 32))
esche
Сообщения: 1054
Зарегистрирован: 2010.11.24, 03:39

Re: О том как я календарь прикручивал

Сообщение esche »

гуглить jquery.maskedInput ..

Код: Выделить всё

$(".datepicker").mask("9999-99-99"); 
...
kennobi
Сообщения: 7
Зарегистрирован: 2012.02.03, 14:09

Re: О том как я календарь прикручивал

Сообщение kennobi »

esche писал(а):гуглить jquery.maskedInput ..

Код: Выделить всё

$(".datepicker").mask("9999-99-99"); 
Спасибо, что откликнулись на мою просьбу, но я спрашивал немного о другом.
Понятно, что можно использовать jqury для любого текстового поля, но мне нужно прикрутить маску именно к компоненту CJuiDatePicker, желательно с каким - нибудь простым кусочком кода. Вот я делаю, к примеру так:
В начале файла пишу:
$cs=Yii::app()->clientScript;
$cs->registerCoreScript('jquery');
$cs->registerScriptFile(Yii::app()->request->baseUrl.'/js/jquery_ui/jquery.maskedinput.js', CClientScript::POS_HEAD);
$script = '$(function($){ $("#id_field").mask("99/99/9999"); });'."\n";
$cs->registerScript('datepicker_init_local', $script, CClientScript::POS_BEGIN);

Потом надо сменить у датапикера айдишник, пытаюсь это сделать в массиве настроек, там, где прописываем имя поля датапикера:
$calendar = 'zii.widgets.jui.CJuiDatePicker';

$arr_set_calendar_data = array(
'id' => 'id_field', // вот здесь видимо надо указать новый id по идее....???
'name'=>'data_с',
'value' =>$arr_calculate['begindate'],
// additional javascript options for the date picker plugin
'options'=>array(
'showAnim'=>'fold',
'dateFormat' => 'dd.mm.yy', // Формат даты
'changeYear' => 'true',
),
'htmlOptions'=>array(
'style'=>'height:20px;'
),
);

После этого в коде html-страницы вывожу сам датапикер:
<? $this->widget($calendar, $arr_set_calendar_data); ?>

... И ничего не подключается. Где у меня может быть ошибка?
esche
Сообщения: 1054
Зарегистрирован: 2010.11.24, 03:39

Re: О том как я календарь прикручивал

Сообщение esche »

Спасибо, что откликнулись на мою просьбу, но я спрашивал немного о другом.
Понятно, что можно использовать jqury для любого текстового поля, но мне нужно прикрутить маску именно к компоненту CJuiDatePicker,
гуглить datepicker + maskedinput :) (насчёт 32 февраля не уверен.. но ещё есть clientValidation :) )
Ошибки javascript можно увидеть, например, в Firebug.
id-шник следует указывать в htmlOptions
...
kennobi
Сообщения: 7
Зарегистрирован: 2012.02.03, 14:09

Re: О том как я календарь прикручивал

Сообщение kennobi »

Коллеги!, esche - А не подскажете, где вообще можно почитать про подключение js к формам yii ?
Боле-менее внятное описание желательно с примерами кода. На сайте разработчиков только тупо перечисляются методы и свойства классов.
А с практическими примерами совсем не густо...:(
esche
Сообщения: 1054
Зарегистрирован: 2010.11.24, 03:39

Re: О том как я календарь прикручивал

Сообщение esche »

kennobi писал(а):Коллеги!, esche - А не подскажете, где вообще можно почитать про подключение js к формам yii ?
Вообще, js "подключается" к HTML.. а в Yii имеется возможность задать это подключение, указывая нужный JS как параметры PHP-массива. Если говорить о привязке maskedinput-а, то это скорее вопрос по JQuery - следует просто указать нужный селектор (id либо name)

А вообще, если "почитать" - первым делом смотреть в гайде и в API (очерёдность может быть другая)
Если не получилось - ответы на большинство вопросов (с примерами и обсуждениями) обычно можно найти одним из двух способов..

http://www.yiiframework.com/search/?typ ... datepicker
http://www.google.com/cse?cx=0062370355 ... datepicker
...
kennobi
Сообщения: 7
Зарегистрирован: 2012.02.03, 14:09

Re: О том как я календарь прикручивал

Сообщение kennobi »

esche писал(а): Если говорить о привязке maskedinput-а, то это скорее вопрос по JQuery - следует просто указать нужный селектор (id либо name)
Да вот как-то не хочет yii подключать скрипты к отрендереной странице. Тоесть он их подключает, но они почему-то не выполняются.
При этом скрипты самого датапикера подключаются вполне нормально. Никак не пойму, где там трабл.
Нагуглил совет, вот здесь:
http://hafiznor.wordpress.com/2010/09/0 ... -date-etc/

... Вначале подключаем скрипт:
$cs=Yii::app()->clientScript;
$cs->registerScriptFile(Yii::app()->baseUrl.’/js/jquery.maskedinput.js’,CClientScript::POS_HEAD);

(...Я создал папку "js" в корне директории "protected" и закинул туда файл jquery.maskedinput.js который вытащил из папки самого фреймворка yii...)

потом вписываю в html - код сам скрипт:
<SCRIPT language=”javascript”>

$(‘#date_1′).mask(“99-99-9999″,{placeholder:”_”});

</SCRIPT>

Потом указываю параметры датапикера (см. выше) и меняю у него айдишник:
$cld = $this->widget($calendar, $arr_set_calendar_data);
$cld->setID('date_1');

В результате в исходном коде страницы в заголовке прописывается:
<script type="text/javascript" src="/assets/b2e30fb3/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.maskedinput.js"></script>

а в тело страницы добавляется скрипт:
<SCRIPT language=”javascript”>

$('#date_1').mask("99-99-9999",{placeholder:"_"});

</SCRIPT>

Но этот скрипт почему-то выполняться не хочет, хотя скрипт самого датапикера в самом низу страницы исправно фурычит.
Никак не пойму, где трабла...
kennobi
Сообщения: 7
Зарегистрирован: 2012.02.03, 14:09

Re: О том как я календарь прикручивал

Сообщение kennobi »

А вообще если всё только гуглить, то зачем тогда нужны обсуждения на форумах разработчиков?
Весь интернет можно закрыть и повесить везде одни только ссылки на гугль :))
Аватара пользователя
radamir
Сообщения: 142
Зарегистрирован: 2009.08.10, 08:02
Откуда: Новосибирск

Re: О том как я календарь прикручивал

Сообщение radamir »

До но ссылки в гугле ведут как раз на форумы разработчиков, не?
kennobi
Сообщения: 7
Зарегистрирован: 2012.02.03, 14:09

Re: О том как я календарь прикручивал

Сообщение kennobi »

radamir писал(а):До но ссылки в гугле ведут как раз на форумы разработчиков, не?
Да, но на форумах разработчиков одни вопросы и советы обращаться к ссылкам в гугле :)

Да я роюсь в гугле, не подумайте, что мне это западло. Просто пока не нахожу того, что мне надо. Вопрос приложения маски к этому компоненту все как-то стыдливо замалчивают, даже иностранцы.
Если кому попадется что-то полезное, прошу запостить в эту тему ссылку.
Последний раз редактировалось kennobi 2012.02.10, 14:21, всего редактировалось 1 раз.
kennobi
Сообщения: 7
Зарегистрирован: 2012.02.03, 14:09

Re: О том как я календарь прикручивал

Сообщение kennobi »

Всё, коллеги. Наконец-то подобрал правильный синтаксис! Тема снимается. Я не буду вас бестолку отсылать к гуглю, всё равно там ничего нет :)
Опишу всё здесь, может кому пригодится, тем более, что пара строчек всего :) ...:

1. Загружаем вот отсюда: http://digitalbush.com/projects/masked-input-plugin/ свеженькую версию библиотеки jquery.maskedinput-1.3.js
2. Создаем в корне сайта каталог js и кидаем туда библиотеку.
3. В начале файла прописываем:

$cs=Yii::app()->clientScript; // получаем объект yii связанный со скриптами
$cs->registerCoreScript('jquery'); // запускаем библиотеку jquery
$cs->registerScriptFile(Yii::app()->baseUrl.'/js/jquery.maskedinput-1.3.js',CClientScript::POS_HEAD); // прописывем в заголовке файла js-библиотеку
$script = "jQuery(function($) { jQuery('#date_1').mask('99-99-9999',{placeholder:'_'}); }); "; // собираем скрипт
Yii::app()->clientScript->registerScript('sc1', $script, CClientScript::POS_END); // полключаем скрипт в конце html - файла.

После этого в массиве настроек CJuiDatePicker просто меняем параметр имени на наш идентификатор .... 'name'=>'date_1', ...
Это всё. Маска подключается.
mess@nger
Сообщения: 54
Зарегистрирован: 2012.06.25, 14:32
Откуда: Житомир

Re: О том как я календарь прикручивал

Сообщение mess@nger »

День добрый,
Только начинаю разбираться в Yii
Не получается в DatePicker изменить формат даты:

Код: Выделить всё

        <?
        $this->widget('zii.widgets.jui.CJuiDatePicker', array(
                'name'=>'ZADACHI[DATE_NVUK]',
                // additional javascript options for the date picker plugin
                'language'=>'ru',
                'options'=>array(
                    'formatDate'=>'yy-mm-dd',
                ),
            ));
        ?>
выдает "06.06.2012"
подскажите, плиз, что не так.
kuksov
Сообщения: 1
Зарегистрирован: 2012.07.23, 18:24

Re: О том как я календарь прикручивал

Сообщение kuksov »

у тебя ошибка

Код: Выделить всё

'dateFormat'=>'yy-mm-dd'
Ответить