下拉菜單中的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日期選擇器

回答

相關問題