Использование UIkit Datepicker в формах SEBLOD

23.02.2015
1315

Хочу поставить красивый скрипт календаря на выбор даты в форме SEBLOD

Всем доброго дня!

Всем, кто использует UIkit framework, я думаю, хочется минимизировать использование стороних скриптом, чтобы на сайте было все однообразно и красиво. И вот, рано или поздно, доходим до поля Calendar с их не очень новым и не очень responsive скриптом, который как бельмо на лице нашего сайта. 

Проблема с использованием Datepicker от UIkit очевидна - формат выдаваемой даты не ложится в базу и требует дополнительной обработки. Опять же, поле SEBLOD содержит множество нужных настроек, которые хотелось бы использовать. То есть, самое симпатичное - это использование нужного нам скрипта в поле SEBLOD Calendar. BINGO!!! Этим мы и займемся.

Что делает скрипт в поле Calendar? Он кладет дату в два поля - в видимое, для того, чтоб она отображалась согласно настройкам и невидимое - для сохранения в базу. Остальное выполняется с помощью php на стороне сервера. То есть нам надо просто сделать так, чтоб наш скрипт, в данном случае Datepicker подменял действие родного скрипта в поле. 

На наше счастье, разработчики SEBLOD сделали так, что календарик появляется только при клике по кнопке, находящейся рядом с видимым полем. Тогда как, разработчики UIkit, наоборот, сделали, что календарик появляется ри клике внутри поля. Так как мы уходим в сторону UIkit, нам кнопка не нужна, и мы ее скроем. Само собой, что мы используем UIkit Framework и компонент Datepicker у нас подключен.

Идем в наш ТК и содаем поле типа calendar с именем custom_calendar, настраиваем, как нам надо - все будет работать - и присваем ему атрибут

data-uk-datepicker="{format:'DD.MM.YYYY'}"

- согласно инструкции к Datepicker, для подключения полю надо присвоить такие атрибуты. Параметр format надо подобрать, чтоб отображение было таким же, как настроено для самого поля. В данном случае, для поля настройка d.m.Y. Теперь у нас при клике на кнопку появляется календарик по-умолчанию, а при клике на поле - Datepicker.

 Идем в наши стили и прописываем для кнопки 

.btn#custom_calendar-trigger {
    display: hidden;
}

Ну, и вообще, вы можете прописать это как угодно, лишь бы кнопку скрыть.

Ну, и теперь - самое главное. Как сделать, чтоб поле календаря SEBLOD понимало значения, которые дает наш Datepicker? Достаточно просто. Надо добавить в форму вот такой скрипт:

 
jQuery('#custom_calendar').on('change',function(){ 
 Jdate=Calendar.parseDate(jQuery('#custom_calendar').val()); 
 jQuery('#custom_calendar_hidden').val(Calendar.printDate(Jdate,"%Y-%m-%d %H:%M:00")); 
}); 

Все, можно пробовать сохранить. Я использовал штатный скрипт поля для передачи данных от Datepicker нашему полю. Таким образом, мы используем снаружи нужный нам скрипт, а внутри у нас работают все настройки штатного поля себлод.

Комментарии  

# Dgikar А как добавить поддержку многоязычности?

У Вас недостаточно прав для добавления комментариев. Для того, чтобы оставить свой комментарий необходимо зарегистрироваться на сайте.