jquery selectBox與jquery ui datepicker衝突

如果我使用jquery selectBox插件，我的datepicker插件不會關閉。我使用的代碼：jquery selectBox與jquery ui datepicker衝突

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。

問題是如果我使用selectbox，Datepicker不能關閉點擊。我已經嘗試沒有成功沒有衝突。如果我在Datepicker中選擇日期正常關閉。

在頁面上的OBS我有兩個datepicker的字段。

來源

2013-10-09 caju

Selectbox插件通過取消<html>上的事件冒泡導致此問題。

查找selectbox.js以下塊：

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

您在這裏有2個選項。刪除e.stopPropagation();行或在其下面添加$(".date-field input").datepicker("hide");。

來源

2013-12-18 14:50:02 robocub

問題出現是因爲selectbox中的e.stopPropagation阻止mousedown傳播到父項（從選擇框中使用的「html」到父級「文檔」在日期選擇器中使用）。

問題可以通過更改受日期選擇器影響的元素來解決。可以將附加事件附加到「html」元素（事件將被執行，因爲e.stopPropagation不會在當前級別停止傳播 - 兩個事件都將附加到「html」元素），而不是附加到「文檔」事件。

要解決的問題，下面的代碼可用於：

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

它可以在任何的js文件中使用（jquery.selectbox.js和jQuery的ui.js不必更改）。

來源

2014-09-24 10:50:12 Diana28

jquery selectBox與jquery ui datepicker衝突

回答

相關問題