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

Question

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/

Answer 1

That's simple. You just stopPropagation on #ui-datepicker-div

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

Answer 2

In case you have created an angular directive, you can do this in your link function inside directive to fix the problem.

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