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

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

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

$('.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(); 
});

来源

2013-03-14 kabanek

，你可以做到以下几点：

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

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

注意下拉事件的父元素上触发。从那里你可以检查哪个元素已被点击，并防止默认行为，如果确定。请务必检查js组件的引导文档：http://getbootstrap.com/javascript/#dropdowns-usage

希望它有帮助。

来源

2014-07-18 11:09:59 miron

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

第一个用了jQuery的DatePicker的点击

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

其他更permant的解决办法是改变datepicker.js文件本身时，向上冒泡一个时间停止的事件，但它听起来像是你正在使用datepicker cdn。如果你可以下载并在本地使用它，你可以破解它打开如果添加e.stopPropagation（）函数来这里，你可以找到的代码看起来像这样

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...

，这样

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()){

您的datepickers将停止干扰您的其他DOM元素，尽管此解决方案更为广泛，并且我会测试以确保它不会影响代码中的其他区域。

来源

2017-12-08 15:15:40

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

回答

相关问题