Bootstrap 3 popover with ui datepicker in - close on month click

Question

I have UI datepicker calendar in an bootstrap popover - all work ok except the popover close when i change the months- need to close only on Today button or outside in body click.

I found several examples what solve the popover outside click then popover close- but in my case i can't get to work any solution.

$('.popover-calendar').popover({
    html: true,
    placement: 'bottom',
    fixclass: 'calendar',
    content: function () {
        return $($(this).data('contentwrapper')).html();
    },
    callback: function () {
        $("#datepicker").datepicker({

        });
    }
}).on("click", function () {
    $(this).next().addClass('calendar-open');
});

$('body').on('click', function (e) {
    $('.popover-calendar').each(function () {
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });

});

Check the jsfiddle

How to produce the problem click Today - then click next or prev month navigation arrow - and the popover close (need to stay and show the changed month).

Answer 1

Try this: JSFiddle

Now you should be able to change the month and with a click on the button the datepicker will close.

The code i changed:

$('body').on('click', function (e) {
        $('.popover-calendar').each(function () {
            $('.popover-calendar').datepicker();
            $('.popover-calendar').mousedown(function() {
                $(this).datepicker('hide');    
            });
        });
    });