Verhindern, dass Datepicker ein übergeordnetes Dropdown-Menü schließt

Question

Ich verwende Bootstrap, um eine Site zu entwickeln, und ich brauche ein Formular in einem Dropdown-Menü in meinem Top-Nav.

Das funktioniert gut, aber ich muss auch ein Datepicker in einem der Felder verwenden und wenn der Benutzer einen anderen Monat auswählt, schließt das Eltern Dropdown-Menü.

Ich möchte es so, dass Sie auf eine beliebige Stelle innerhalb des Datepicker ohne das Dropdown-Schließen klicken können.

Alternativ kann das Dropdown-Menü so geändert werden, dass es nur mit einem Klick auf den Nav-Link geöffnet und geschlossen wird und nicht geschlossen wird, wenn Sie irgendwo klicken.

jsfiddle hier - http://jsfiddle.net/ackuu/

Danke für jede Hilfe !!

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

Sie müssen einfach die .datapicker ‚s Click-Ereignis verhindern, sprudeln in der DOM-Baum:

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

Verästelter Geige ->http://jsfiddle.net/VC288/

Answer 2

Der folgende Code funktioniert für mich.

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

Ich weiß, das ist eine alte Frage, aber der Entwickler hat eine Debug-Funktion implemted gerade diesen

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