jQuery UI datepicker doesn't hide when click outside

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

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...

Checking here for better solutions than what I had, but I think I like my solution

$(function() {
  $(".datepicker").datepicker();

  $(".hasDatepicker, .ui-datepicker, .ui-datepicker-trigger").click(function(event) {
    event.stopPropagation();
  });

  $("body").bind("click touchstart", function(event) {
    $('.ui-datepicker').hide();
    $('.hasDatepicker').blur();
  });
});

<link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<input type="text" class="datepicker"/>