CODEWITHSUNDEEP
jquery-uidatepicker
weedave
weedave

Reputation: 237

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.

Upvotes: 1

Views: 4589

Answers (2)

DeadlyChambers
DeadlyChambers

Reputation: 5265

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();
    });

Upvotes: 0

weedave
weedave

Reputation: 237

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.

Upvotes: 3

Related Questions