2

如果我使用 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 我有两个日期选择器字段。

4

2 回答 2

3

出现问题是因为来自选择框的 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-24T10:50:12.030 回答
2

选择框插件通过取消<html>.

在 selectbox.js 中找到以下块：

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

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

于 2013-12-18T14:50:02.840 回答