JQuery SelectBox конфликтует с JQuery UI DatePicker

Мой плагин datepicker не закрывается, если я использую плагин jquery selectBox. Код, который я использую:

jQuery( document ).ready(function( $ )
{
  $(".date-field input").datepicker
  ({ 
    dateFormat: "yy/mm/dd",
    minDate: "2012/03/01",
    maxDate: "0d",
    dayNamesMin: [ "Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab" ],
    dayNames: [ "Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado" ],
    monthNames: ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"],
    showOptions: { direction: "up" },
    showAnim: "drop",
    duration: 300
  });

  $(".select-field select").selectbox({effect:"slide",speed:400});

});

Я использую последнюю библиотеку jquery и единственные необходимые плагины для использования DatePicker с эффектом отбрасывания.

Проблема в том, что если я использую поле выбора, DatePicker не закрывается при щелчке. Я уже попробовал noConflict без успеха. Если я выбираю дату в DatePicker закрывается нормально.

На странице OBS у меня есть два поля для выбора даты.

Источник

2 ответа

Решение

Плагин Selectbox вызывает эту проблему, отменяя всплывающее событие <html>,

Найдите следующий блок в selectbox.js:

$("html").on('mousedown', function (e) {
    e.stopPropagation();
    $("select").selectbox('close');
});

У вас есть 2 варианта здесь. Либо удалить e.stopPropagation(); линия или добавить $(".date-field input").datepicker("hide"); под этим.

Источник

Проблема возникает из-за того, что e.stopPropagation from selectbox предотвращает распространение mousedown к родителю (от "html", используемого в selectbox, до родительского "документа", используемого в средстве выбора даты).

Проблема может быть решена путем изменения элемента, на который влияет средство выбора даты. Вместо прикрепления события к "документу" его можно прикрепить к элементу "html" (событие будет выполнено, потому что e.stopPropagation не останавливает распространение на текущем уровне - оба события будут присоединены к элементу "html").

Чтобы решить проблему, ниже код может быть использован:

   if (!!$.datepicker) {
        $(document).unbind('mousedown', $.datepicker._checkExternalClick);
        $('html').mousedown($.datepicker._checkExternalClick);
    };

Он может быть использован в любом файле js (jquery.selectbox.js и jquery-ui.js не должны быть изменены).

Источник
Другие вопросы по тегам