jQuery datepicker not closing

My jQuery datepicker only closes when picking a date, but I want it to close when the user clicks away from or on the close button. However, even with the showButtonPanel option set to true, the close button does not appear but the 'Today' button does.

I think it may have something to with having a 开发者_运维技巧custom onSelect action instead of the default but can't figure out how to close it myself. Tried using $.datepicker('hide') and ('destroy') but no difference.

$(document).ready(function() {
    $.datepicker.setDefaults({firstDay: 1, dateFormat: 'dd/mm/yy', showAnim: 'fade'});
});    
$(document).delegate('.editEndDate', 'click', function() {              
$('.formattedEndDate').datepicker({
    defaultDate: $('.formattedEndDate').attr('id'),
    onSelect: function(dateText, inst) { 
    var date = dateText;
    var data = 'project=' + projectId + '&date=' + date + '&dateToChange=end';
        $.ajax({
            type: 'POST',
            url: 'helpers/change-project-date.php',
            data: data + '&ajax=1',
            success: function(response){
                getNotification(response);
                $('.formattedEndDate').fadeOut(function() {
                    $(this).load(location.href+ ' .formattedEndDate', function() {
                        $(this).fadeIn('slow');
                    });
                });     
            },
            error: function(response){
                getNotification(response);
            },
            complete: function(response){
                $('.formattedEndDate').datepicker('hide');
            }
        });
    }
});
return false;
});

It may be something simple but I just can't see it. Thanks in advance.

---

I may have found a solution to my own problem...

$('.ui-datepicker').live('mouseleave', function() {
    $('.ui-datepicker').fadeOut(function() {
        $('.formattedStartDate').attr('class', 'formattedStartDate');
        $(this).remove();
    });
});

This works for me, hopefully it'll work for others too.

---

Everything blew up when I tried to use live. So I had to use on. I also added in input focus hide. So if you happen to focus on a different field the calendar isn't just hanging around. I also just did hide, but you should be able to switch it for fade if that is what you are wanting.

    $('.bootstrap-datetimepicker-widget').on('mouseleave', function () {
        $(this).hide();
    })
    $('input').on('focus', function () {
        $('.bootstrap-datetimepicker-widget').hide();
    });