防止日期選擇器關閉父級下拉列表

Question

我使用引導程序開發一個站點，並且需要在我的頂級導航欄中的下拉列表中使用表單。

這工作正常，但我也必須在其中一個字段中使用日期選擇器，當用戶選擇不同的月份時，父級下拉菜單關閉。

我喜歡它，所以你可以在沒有下拉菜單的情況下點擊datepicker中的任何地方。

或者，可以更改下拉列表，使其僅在導航鏈接上單擊打開和關閉，而不是在您單擊任何位置時關閉。

的jsfiddle這裏 - http://jsfiddle.net/ackuu/

感謝您的幫助！

HTML

<div class="navbar txt-grey" role="navigation"> 
    <div class="navbar-header"> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Dropdown</b><b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <form method="POST" class="form"> 
         <div class="field clear"> 
           Date          
         <input type="text" name="p_start_date" id="datepicker" class="input datepicker" placeholder="Select date" /> 
         </div> 
         <button type="submit" name="res_submit">Go</button>  
        </form> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

JS

$().ready(function(){ 
    $(".datepicker").datepicker({ 
     dateFormat  : 'dd-mm-yy', 
     firstDay  : 1, 
     minDate   : 1, 
     showOtherMonths  : true, 
     selectOtherMonths : true 
    }); 
}); 

Answer 1

您必須簡單地防止.datapicker click事件在DOM樹冒泡：

$().ready(function(){ 
    $(".datepicker").datepicker({ 
     dateFormat   : 'dd-mm-yy', 
     firstDay   : 1,   // sets first day of the week to Monday 
     minDate    : 1,   // sets first available date in calendar to tomorrow's date 
     showOtherMonths  : true,   // displays days at beginning or end of adjacent months 
     selectOtherMonths : true 
    }).click(function(e) { 
     e.stopPropagation(); // <--- here 
    }); 
}); 

歧路小提琴 - >http://jsfiddle.net/VC288/

Answer 2

下面的代碼適用於我。

$().ready(function(){ 
    $(".datepicker").datepicker({ 
    dateFormat   : 'dd-mm-yy', 
    firstDay   : 1,   // sets first day of the week to Monday 
    minDate    : 1,   // sets first available date in calendar to tomorrow's date 
    showOtherMonths  : true,   // displays days at beginning or end of adjacent months 
    selectOtherMonths : true 
}).click(function() { 
    $('#ui-datepicker-div').click(function(e){ 
     e.stopPropagation(); 
    }); 
    }); 
}); 

Answer 3

我知道這是一個老問題，但開發商已經implemted調試功能來做到這本

$().ready(function(){ 
    $(".datepicker").datepicker({ 
     debug:true; 
    });  
});