下拉菜单中的 Twitter 日期选择器答案

【问题标题】：Twitter datepicker in dropdown menu下拉菜单中的 Twitter 日期选择器
【发布时间】：2013-03-14 08:50:54
【问题描述】：

我想在下拉菜单中添加一个日期选择器。我用这个日期选择器link

接下来，我添加了代码以在单击输入选择日期时不关闭菜单，输入消失。我该如何解决？

$('.datepicker').datepicker({
    autoclose: true
});

$('.dropdown-toggle').dropdown();
$('.jsolr-search-result-form .dropdown input, .jsolr-search-result-form .dropdown label, .jsolr-search-result-form ul span').click(function(e) {
  e.stopPropagation();
});

【问题讨论】：

标签： twitter-bootstrap datepicker

【解决方案1】：

您可以执行以下操作：

jQuery(function($){
    $('#dropdownMenu1').parent().on('hide.bs.dropdown', function(e){
        e.preventDefault();
    });
});

示例：http://jsfiddle.net/9qyf2/

请注意，下拉事件是在父元素上触发的。从那里您可以检查已单击哪个元素并在需要时阻止默认行为。确保检查 js 组件的引导文档：http://getbootstrap.com/javascript/#dropdowns-usage

希望对你有帮助。

【讨论】：

【解决方案2】：

这个很麻烦。我在一些 Bootstrap 下拉菜单中也有几个日期选择器。我用两种方法解决了这个问题。

第一个使用 jQuery 来阻止事件在点击 DatePicker 时冒泡一次

$('.yourDatePicker').on('hide', function(event) {
    event.stopPropagation();
    $(this).closest('.yourDropDown').one('hide.bs.dropdown', function(ev) {
        return false;
    });
});

另一个更永久的解决方案是更改 datepicker.js 文件本身，但听起来您正在使用 datepicker cdn。如果你可以下载到本地使用，你可以破解打开你会发现代码是这样的

click: function(e){
    e.preventDefault();
    var target = $(e.target).closest('span, td, th'),
        year, month, day;
    if (target.length === 1){
        switch (target[0].nodeName.toLowerCase()){
...ect...

如果你在这个区域添加一个 e.stopPropagation() 函数，像这样

click: function(e){
    e.preventDefault();
    e.stopPropagation(); // <-- add this
    var target = $(e.target).closest('span, td, th'),
        year, month, day;
    if (target.length === 1){
        switch (target[0].nodeName.toLowerCase()){

您的日期选择器将停止干扰您的其他 DOM 元素，尽管此解决方案更为普遍，我会进行测试以确保它不会影响您代码中的其他区域。

【讨论】：