• статья
  • pantey

Применение виджета Datepicker в Drupal 7

04.10.2012

При создании веб интерфейсов необходимо учитывать многие нюансы, одним из таких является ввод даты пользователем. Допустим у вас есть некий блог, который при регистрации требует от пользователя ввода даты рождения (не обязательно при регистрации, применимо где угодно). С точки зрения пользователя – это совершенно не приятная процедура, так как приходится вводить какие то данные, а как мы знаем большинство пользователей привыкло всем управляться с помощью мышки. Специально для таких случаев и был разработан виджет Datepicker, который позволяет выбрать свою дату рождения или любую другую дату без использования клавиатуры.

Что такое Datepicker, это виджет Jquery, который производит вставку даты в поле («input»), для его работы так же необходима библиотека Jquey UI (данную библиотеку мы будем затрагивать ещё не раз, так как она позволяет создавать различные динамические плюшки на сайте, ведь не зря сокращение UI –означает User Interface).

Для тестирования давайте создадим отдельный тип материала и привяжем к нему текстовое поле, которое и будет являться нашим полем для ввода даты. А так же позволим всем пользователям создавать статьи для данного типа.

Идём по пути «Структура->Типы материалов->Добавить тип материала»

Вводим название типа и сохраняем. У меня он называется «test_type_content». Теперь создадим дополнительное поле для данного типа материала, переходим по пути «Структура->Типы материалов» из списка выбираем наш только что созданный тип материала и кликаем по пункту «Управление полями»

И создаем новое поле:

Жмём сохранить и вводим максимальную длину 12 символов, для даты нам этого будет достаточно.

Далее сохранить настройки поля. Теперь вы можете ввести дополнительные параметры для этого поля, такие как - будет ли оно обязательным, значение по умолчанию и т.д. , я всё оставлю как есть, для примера этого будет достаточно, поэтому жмём «Сохранить настройки».

Теперь давайте сделаем доступным данный тип материалов для всех пользователей, как для зарегистрированных, так и для анонимов. Для этого переходим по пути «Пользователи -> во вкладку Права доступа» и поставим галочки напротив создания и редактирования у нашего типа материалов.

Далее жмём «Сохранить права доступа», на этом наши первоначальные настройки закончены и начинается самое интересное.

Теперь нам необходимо скачать библиотеки Jquery и Jquery UI. Если с библиотекой Jquery вопросов никаких не возникает, то вот над Jquery UI ещё стоит подумать, так как в полном своём содержании она весит примерно около 2mb, что для медленного соединения с интернетом её подгрузка на страницу будет не простительно долгой. Поэтому имеет смысл повыкидывать из неё всё лишнее (а в данном случае лишнего там очень много) и оставить только наш виджет. К счастью это всё можно сделать ещё до загрузки самой библиотеки на официальном сайте. Поэтому переходим по ссылке и деактивируем плагины «Interactions» и «Effects».

В пункте «Theme» можно выбрать любую тему оформления по умолчанию, после всех манипуляций – скачиваем библиотеку.

Перед нами два файл, в 1м – Jquery, во 2м – архив Jquery UI со множеством файлов, из него нам нужно только сама библиотека, стили CSS. И всё это дело нам необходимо подключить к шаблону Drupal. Как правильно подключать скрипты и стили в Drupal можно прочитать здесь, я на этом останавливаться не буду. Копируем библиотеки Jquery и Jquery UI в папку JS нашего шаблона, стили так же копируем в паку CSS и подключаем всё это дело через

Название_шаблона.info 

Так же необходимо учитывать, что при вызове функции Jquery в Drupal – необходимо использовать «noconflict», иначе ваши скрипты просто не будут работать, как это сделать читаем вот здесь, на этом так же не останавливаемся. Пересохраняем наши настройки в разделе «Оформление», что бы подцепились все новые скрипты и стили. И теперь нам просто нужно вызвать функцию на нашем поле ввода даты, для этого создадим новый текстовый документ с названием, например date.js внутри которого прописываем следующий код:

$dr(document).ready(function(){
$dr("#edit-field-date-und-0-value").datepicker();
});

Ваши индентификаторы поля могут отличаться от моего, поэтому необходимо посмотреть id через любой встроенный редактор браузера или использовать firebug:

И так же подключаем его через

Название_шаблона.info

Опять пересохряняем настройки шаблона и смотрим, что у нас получилось:

Как мы видим, всё работает как нужно! У данного виджета имеется масса опций, например нам нужно локализовать его на русский язык, для этого необходимо сбросить настройки по умолчанию и присвоить ему новые параметры, а так же необходимо подключить файл с русским языком. Для этого в вашем архиве с Jquery UI , есть ещё папка под названием «development -bundle» - в ней хранятся всевозможные опции виджетов. Идём по пути «development –bundle -> ui -> i18n -> выбираем файл с нужным языком»

Так же копируем его в папку js нашего шаблона и подключаем его к страницам нашего сайта через:

Название_шаблона.info

Теперь необходимо переписать наш скрипт вызова datepicker, выглядить будет он вот так:

$dr(document).ready(function(){
$dr.datepicker.setDefaults(
  $dr.extend($dr.datepicker.regional["ru"])
  );

$dr("#edit-field-date-und-0-value").datepicker();
});

Пересохраняем настройки шаблона, что бы подключился новый скрипт с русским языком и смотрим, что у нас из этого получилось:

Как видим, русский язык у нас появился. Принцип работы данного виджета надеюсь понятен. Полный список опций можно найти на официальном ресурсе, где так же расписан синтаксис для каждой опции, не забываем только про «noConflict», что бы ваши старания не прошли даром.

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.