12

我的要求：我正在使用 twitter 引导按钮下拉菜单（http://twitter.github.io/bootstrap/components.html#buttonDropdowns）并使用 bootstrap-datepicker（http://eternicode.github.io/bootstrap-datepicker /#examples ) 在列表项之一中，如下图所示。

在此处输入图像描述

根据我的要求，我需要在最后一项中有月历，然后单击它会打开 bootstrap-datepicker，我应该能够选择月份和年份。

我面临的问题：当我打开该日期选择器并选择任何月份或年份或单击日期选择器中的任何导航以移动到另一个月份或年份时，按钮下拉隐藏，但日期选择器仍然存在，如下图所示。我一直在尝试但无法使其正常工作。

在此处输入图像描述

我的想法（不确定它是否正确）：当我点击 datepicker 时，它直接附加到 body 元素，因为所有列表项及其子项都位于 html 的深处。因此，即使我尝试为下拉列表中的任何点击停止事件传播，它也不会计入日期选择器，因为它已附加到正文。（只是为了了解更多信息，我在单击其他列表项时定义了一些操作）

如果有人能帮我解决这个问题，我真的很感激，我真的需要让这个东西为我的项目工作。

4

3 回答 3

11

使用此日期选择器，您需要防止在单个按钮上传播。将此添加到您的脚本中。

    $(document).on('click', 'span.month, th.next, th.prev, th.switch, span.year', function (e) {
        e.stopPropagation();
    });

演示

于 2013-07-05T19:50:33.493 回答
5

接受的答案对我不起作用，但我找到了另一种解决方法。

解决方法

$('#your-datepicker')
    .datepicker()
    .on('show', function(e) {
        var $popup = $('.datepicker');
        $popup.click(function () { return false; });
    });

解释

日期选择器似乎将其 HTML 添加到<body>每次显示的末尾。弹出窗口的 HTML 如下所示：

<div
    class="
        datepicker
        datepicker-dropdown
        dropdown-menu
        datepicker-orient-left
        datepicker-orient-top
    "
    style="display: block; top: 202px; left: 712.5px; z-index: 1010;">
    <!-- More HTML here -->
</div>

其他解决方案建议阻止click事件传播可以解决问题。实现这一点的一种方法是处理事件并返回false。由于每次显示弹窗时都会生成HTML，因此可能也需要每次都配置拦截。

于 2014-01-24T04:11:00.293 回答
2

接受的答案对我也不起作用，@Sam's 也没有，尽管它确实为我指明了另一个有效的解决方案（感谢 Sam）。我的问题是datepicker是在选择日期时不应崩溃的另一个可折叠元件之内的。这是我的解决方案：

    $('#myDatepicker').datepicker().on('click', function () {
        $('.datepicker').click(function(e) {
            e.stopPropagation(); // prevent clicks on datepicker from collapsing 'parent'
        });
    });
于 2014-11-24T11:55:21.050 回答