jquery selectBox 与 jquery ui datepicker 冲突答案

【问题标题】：Jquery selectBox conflict with jquery ui datepickerjquery selectBox 与 jquery ui datepicker 冲突
【发布时间】：2013-10-09 19:43:03
【问题描述】：

如果我使用 jquery selectBox 插件，我的 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。

问题是，如果我使用选择框，点击退出时日期选择器不会关闭。我已经尝试过 noConflict 没有成功。如果我在 Datepicker 中选择一个日期，则会正常关闭。

页面上的 OBS 我有两个日期选择器字段。

【问题讨论】：

标签： jquery-ui datepicker jquery-selectbox

【解决方案1】：

出现问题是因为来自选择框的 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不用改）。

【讨论】：

【解决方案2】：

Selectbox 插件通过取消<html> 上的事件冒泡导致此问题。

在 selectbox.js 中找到以下块：

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

这里有 2 个选项。删除e.stopPropagation(); 行或在其下方添加$(".date-field input").datepicker("hide");。

【讨论】：