Handle on click event of jQueryUI Datepicker for Bootstrap drop-down menu

I have one Bootstrap drop down menu. In that I have one field for selecting date. I have stopped the event propagation for the drop down menu events. When I select date respective date gets selected in the input field present in the drop down menu. State of the menu also remains open through out this activity. When I go for changing month and year from that datepicker control, drop down menu goes away. How I can handle this on click event of date picker control in this particular case. HTML Code: ``` <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(); }); ``` You can see the actual problem here: http://jsfiddle.net/ajinkya34/PWN8h/