среда, 6 февраля 2013 г.

Stand Up N2 - Как прикрутить jquery ui datepicker к exposed фильтру во views по стандартным полям created/changed

Иногда возникает необходимость сделать datepicker в exposed фильтре вьюва для страндартного поля у любого entity - created или changed. В друпале по дефолту такие поля можно сделать только у поля date используя виджет date_popup (для этого нужен модуль date и date_popup).



Для того чтобы сделать datepicker у стандартных полей, нужно:
  1. Создать во вьюве фильтр для created или changed.
  2. Сделать фильтр exposed.
  3. Подключить jquery ui datepicker, он уже лежит в друпале в папке misc/ui. Это можно сделать используя hook_library(). Например drupal_add_library('system', 'ui.datepicker');
  4. Создать  и подключить js, в котором вы реализуете behaviour с вызовом datepicker для вышего поля. 

Параметры я частично позаимствовал из модуля date_popup.
dateFormat используется такой, потому что в таком формате дату принимает стандартный вьюс фильтр.

Еще есть различные колбеки, например beforeShow, в которых можно добавить стили или изменить позиционирование datepicker. Для дополнительной информации лучше посетить http://jqueryui.com/datepicker/

(function ($) {
  Drupal.behaviors.initDatepicker = {
    attach: function (context, settings) {
      // Init date picker.
      $(context).find('#edit-created').once('my-datepicker', function () {
        $(this).datepicker({
            autoSize: true,
            changeMonth: true,
            changeYear: true,
            autoPopUp: 'focus',
            closeAtTop: false,
            dateFormat: 'yy-mm-dd 00:00:00',
            disabled: false,
            firstDay: 1,
            prevText: '',
            nextText: '',
            closeText: '',
            showSpeed: 'slow',
            buttonImageOnly: true,
            beforeShow: function (input, inst) {
              var $datepicker = inst.dpDiv;
              setTimeout(function () {
                $datepicker.css('z-index', 30000);
              }, 0);
            }}
        );
      });
    }
  };
})(jQuery);


Комментариев нет:

Отправить комментарий