引导按钮下拉菜单中的引导日期选择器答案

【问题标题】：Bootstrap datepicker in bootstrap button drop down引导按钮下拉菜单中的引导日期选择器
【发布时间】：2013-07-03 01:47:09
【问题描述】：

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

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

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

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

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

【问题讨论】：

您还需要添加一些代码，并且可能需要一个小提琴来证明您的问题以获得更多响应。但无论如何，这就是你正在尝试的吗？ jsfiddle.net/hTKYR
@PSL - 你是对的，对此感到抱歉，这是小提琴 - jsfiddle.net/n3NNx。奇怪的是，这里似乎工作正常，当我选择月份时下拉菜单不会隐藏，但是当整个代码与其他内容一起在页面中使用时，下拉菜单会隐藏，如我在我的第二张图片中所示邮政。（我在你的小提琴中使用过资源，不知道，因为我是第一次创建它）
所以问题可能出在其他地方。也只需在小提琴和页面中查看 BS 的版本和其他内容。
@PSL - 没错，我只是在看那个。但是谢谢，我想你帮助我知道问题不在于这段代码。其他因素正在影响这一点。
@PSL - 我意识到你分享的小提琴有来自 eyecon 网站 (eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js) 的日期选择器，但我最初使用的是来自 eternicode (github.com/eternicode/bootstrap-datepicker/blob/master/js/…) 的那个，它只是改进和更好的版本（以前的版本有点错误）。当我使用它时，我看到了问题，这就是问题所在 - jsfiddle.net/eqwWJ。你知道是什么原因造成的吗，两个 js 文件的差异看起来是罪魁祸首。

标签： jquery twitter-bootstrap drop-down-menu event-handling datepicker

【解决方案1】：

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

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

Demo

【讨论】：

非常感谢，就像在演示中一样，它似乎很完美。我会在我的代码中得到它，并在周一早上回到办公桌时检查。
我将它包含在我的代码中，它运行良好。非常感谢你帮助我。 :-)

【解决方案2】：

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

解决方法

$('#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，因此可能也需要每次都配置拦截。

【讨论】：

这个简直太完美了:)

【解决方案3】：

接受的答案对我也不起作用，@Sam 的答案也不起作用，尽管它确实为我指明了另一种有效的解决方案（感谢 Sam）。我的问题是DatePicker是在选择日期时不应该折叠的另一个可折叠元素中，这是我的解决方案：

    $('#myDatepicker').datepicker().on('click', function () {
        $('.datepicker').click(function(e) {
            e.stopPropagation(); // prevent clicks on datepicker from collapsing 'parent'
        });
    });

【讨论】：