jQuery 引导程序按钮下拉菜单中的引导程序日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17480710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap datepicker in bootstrap button drop down
提问by whyAto8
My requirement: I am working on a twitter bootstrap button dropdown (http://twitter.github.io/bootstrap/components.html#buttonDropdowns) and using bootstrap-datepicker (http://eternicode.github.io/bootstrap-datepicker/#examples) in one of the list items as shown in below image.
我的要求：我正在处理 twitter bootstrap 按钮下拉列表（http://twitter.github.io/bootstrap/components.html#buttonDropdowns）并使用 bootstrap-datepicker（http://eternicode.github.io/bootstrap-datepicker /#examples) 在列表项之一中，如下图所示。
As per my requirement, I need to have month calendar in last item and clicking on that opens the bootstrap-datepicker and I should be able to select month & year.
根据我的要求，我需要在最后一个项目中有月历并单击它打开 bootstrap-datepicker，我应该能够选择月份和年份。
Problem I am facing: When I open that datepicker and select any month or year or click on any of the navigation in datepicker to move to another month or year, the button drop down hides, but the datepicker remains there as in the below image. I have been trying but not able to get it working.
我面临的问题：当我打开该日期选择器并选择任何月份或年份或单击日期选择器中的任何导航以移至另一个月份或年份时，按钮下拉菜单会隐藏，但日期选择器仍如下图所示。我一直在尝试，但无法让它工作。
What I think(not sure its correct or not) : When I click on datepicker, it is being attached to the body element directly where as all the list items and thier children are deep down in html. So, even if i try to stop event propagation for any click inside dropdown, it wont count for datepicker, as it is appended to body. ( Just for more info I have some actions defined on click of other list items)
我的想法（不确定它是否正确）：当我点击 datepicker 时，它被直接附加到 body 元素，因为所有列表项和他们的孩子都在 html 的深处。因此，即使我尝试停止下拉列表中任何点击的事件传播，它也不会计入日期选择器，因为它已附加到正文。（只是为了更多信息，我在单击其他列表项时定义了一些操作）
Would really appreciate if someone could help me out with this, I really need to get this thing working for my project.
如果有人能帮我解决这个问题，我真的很感激，我真的需要让这件事为我的项目工作。
采纳答案by PSL
回答by Sam
The accepted answer didn't work for me, but I found another work-around.
接受的答案对我不起作用，但我找到了另一种解决方法。
Work-around
变通方法
$('#your-datepicker')
.datepicker()
.on('show', function(e) {
var $popup = $('.datepicker');
$popup.click(function () { return false; });
});
Explanation
解释
The date-picker seems to add its HTML to the end of the <body>each time it's shown. The HTML for the pop-up looks something like the following:
日期选择器似乎在<body>每次显示时将其 HTML 添加到末尾。弹出窗口的 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>
Other solutions have suggested that preventing propagation of the clickevent can resolve the problem. One way to implement this is to handle the event and return false. Since the HTML is generated each time the pop-up is displayed, the interception may also need to be configured each time.
其他解决方案建议阻止click事件传播可以解决问题。实现这一点的一种方法是处理事件并返回false。由于每次显示弹窗时都会生成HTML，因此每次可能也需要配置拦截。
回答by 11nallan11
The accepted answer didn't work for me either, and neither did @Sam's, although it did point me toward another solution that worked (thanks Sam). My problem was the datepicker was within another collapsible element that shouldn't collapse when dates are selected, etc. Here's my solution:
接受的答案对我也不起作用，@Sam's 也没有，尽管它确实为我指出了另一个有效的解决方案（感谢 Sam）。我的问题是日期选择器位于另一个可折叠元素中，该元素在选择日期等时不应折叠。这是我的解决方案：
$('#myDatepicker').datepicker().on('click', function () {
$('.datepicker').click(function(e) {
e.stopPropagation(); // prevent clicks on datepicker from collapsing 'parent'
});
});
