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