Handle on click event di jQueryUI Datepicker per menu a discesa Bootstrap

Question

Ho un menu a discesa Bootstrap. In questo ho un campo per selezionare la data. Ho interrotto la propagazione dell'evento per gli eventi del menu a discesa.

Quando si seleziona data, viene selezionata la data corrispondente nel campo di inserimento presente nel menu a discesa. Lo stato del menu rimane aperto anche attraverso questa attività. Quando vado a cambiare mese e anno da quel controllo datepicker, il menu a discesa scompare. Come posso gestirlo nell'evento click del controllo di selezione data in questo caso particolare.

codice HTML:

<div class="dropdown keep-open"> 
    <!-- Dropdown Button --> 
    <button id="dLabel" role="button" href="#" 
     data-toggle="dropdown" data-target="#" 
     class="btn btn-primary"> 
     Dropdown <span class="caret"></span> 
    </button> 

    <!-- Dropdown Menu --> 
    <ul id="abc" class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
     <li><input type="text" id="date" name="date" ng-model="date"/> 
     </li> 
    </ul> 
</div> 

Javascript:

$(function(){ 
    $("#date").datepicker({ changeMonth: true, 
       changeYear: true,}); 
}); 

$("#abc").click(function (event) { 
     event.stopPropagation(); 
}); 

si può vedere il vero problema qui: http://jsfiddle.net/ajinkya34/PWN8h/

Answer 1

che è semplice. Basta stopPropagation su #ui-datepicker-div

$("#abc, #ui-datepicker-div").click(function (event) { 
    event.stopPropagation(); 
}); 

Answer 2

Nel caso in cui si è creato una direttiva angolare, si può fare questo nella vostra funzione di collegamento all'interno di direttiva per risolvere il problema.

// Stop event bubbling in case click is on date picker div.... 
 
var widg = $(element).datepicker("widget"); 
 
widg.click(function(e){ 
 
    e.stopPropagation(); 
 
});