Bootstrap datepicker in bootstrap button drop down

Question

My requirement : I am working on a twitter bootstrap button dropdown (http://twitter.github.io/bootstrap/components.html#buttonDropdowns) and using bootstrap-datepicker (http://eternicode.github.io/bootstrap-datepicker/#examples) in one of the list items as shown in below image.

As per my requirement, I need to have month calendar in last item and clicking on that opens the bootstrap-datepicker and I should be able to select month & year.

Problem I am facing : When I open that datepicker and select any month or year or click on any of the navigation in datepicker to move to another month or year, the button drop down hides, but the datepicker remains there as in the below image. I have been trying but not able to get it working.

What I think (not sure its correct or not) : When I click on datepicker, it is being attached to the body element directly where as all the list items and thier children are deep down in html. So, even if i try to stop event propagation for any click inside dropdown, it wont count for datepicker, as it is appended to body. ( Just for more info I have some actions defined on click of other list items)

Would really appreciate if someone could help me out with this, I really need to get this thing working for my project.

Answer 1

With this date-picker you need to prevent propagation on the individual buttons. Add this in your script.

    $(document).on('click', 'span.month, th.next, th.prev, th.switch, span.year', function (e) {
        e.stopPropagation();
    });

Demo