jQuery UI datepicker doesn't hide when click outside

Question

I found a problem with jQuery UI Datepicker on my site.

When I click on the input, it does show a datepicker properly. Nevertheless, when I don't select any date and I just click outside the element, it doesn't hide the datepicker as I'd expect.

When I press the Esc, it disappears, when I select a day it disappears but when I click outside it stays there.

Is there anyone who is able to find the problem?

Link: http://pec.solarismedia.net/index.html#content

Answer 1

Your datepickers have the class hasDatepicker, so try this:

$(".hasDatepicker").blur(function(e) { $(this).datepicker("hide"); });

I'm 99% positive that will work!

And FYI, if you want it to be dynamic (apply to inputs created after), you can use .on

$(".hasDatepicker").on("blur", function(e) { $(this).datepicker("hide"); });

UPDATE ^{(PS, to use the following completely remove the above from your code)}

To answer your comment, the following may not be the best solution, but through trial and error (on your site, using console) it works! And it's relatively short compared to alternate ways I thought of.

$(document).click(function(e) { 
    var ele = $(e.toElement); 
    if (!ele.hasClass("hasDatepicker") && !ele.hasClass("ui-datepicker") && !ele.hasClass("ui-icon") && !$(ele).parent().parents(".ui-datepicker").length)
       $(".hasDatepicker").datepicker("hide"); 
});

As One Line

$(document).click(function(e) { var ele = $(e.toElement); if (!ele.hasClass("hasDatepicker") && !ele.hasClass("ui-datepicker") && !ele.hasClass("ui-icon") && !$(ele).parent().parents(".ui-datepicker").length) $(".hasDatepicker").datepicker("hide"); });

the problem i encountered was being able to tell when the span icon was clicked, it wasnt really wanting to cooperate, thus the extra has class checks

Answer 2

I slightly modified the code from @SaraVanaN and it looks like this:

$(document).on("click", function(e) {
    var elem = $(e.target);
    if(!elem.hasClass("hasDatepicker") && 
        !elem.hasClass("ui-datepicker") && 
        !elem.hasClass("ui-icon") && 
        !elem.hasClass("ui-datepicker-next") && 
        !elem.hasClass("ui-datepicker-prev") && 
        !$(elem).parents(".ui-datepicker").length){
            $('.hasDatepicker').datepicker('hide');
    }
});

i changed this line $(document).on("click", function(e) { but it doesn't matter how you do it with .on("click") or .click() and this line !$(elem).parents(".ui-datepicker").length i took of .parent() worked for me, you should recheck your webpages datepicker, because right now, for me, when you click on a date the div which pops up with dates closes instantly and you can't choose any of the dates...