Question

如果我使用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库和唯一必要的插件来使用带有drop效果的datepicker。

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

页面上的OBS我有两个datepicker字段。

Answer 1

出现问题是因为来自selectbox的e.stopPropagation会阻止mousedown传播到父级（从selectbox中使用的“html”到日期选择器中使用的父级“document”）。

可以通过更改受日期选择器影响的元素来解决问题。而不是将事件附加到“文档”，它可以附加到“html”元素（事件将被执行，因为e.stopPropagation不会在当前级别停止传播 - 两个事件都将附加到“html”元素）。

要解决问题，可以使用以下代码：

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

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

Answer 2

Selectbox插件通过取消<html>上的事件冒泡来解决此问题。

在selectbox.js中找到以下块：

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

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

Jquery selectBox与jquery ui datepicker发生冲突

2 个答案: