'jQuery UI datepicker doesn't hide when click outside

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

Solution 1:^[1]

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

Solution 2:^[2]

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"/>

Solution 3:^[3]

If you want do not hide calendar when you click next/prev month apply following code..

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

Solution 4:^[4]

Here's a modified solution that worked for me:

$(".hasDatepicker").each(function (index, element) {
    var context = $(this);
    context.on("blur", function (e) {
        // The setTimeout is the key here.
        setTimeout(function () {
            if (!context.is(':focus')) {
                $(context).datepicker("hide");
            }
        }, 250);        
    });        
});

Solution 5:^[5]

Here is my solution:

var datePickerHover = false;

$(document).on({
    mouseenter: function (e) 
    {
        datePickerHover = true;
    },
    mouseleave: function () 
    {
        datePickerHover = false;
    }
}, ".datepicker");

$(document).on('mouseup','html',function()
{
    if(datePickerHover == false) $('.datepicker').hide();
});

Solution 6:^[6]

Here is a shorter version of the above code, bit easier to read:

$(document).click(function(e) { 
    if (!$(e.target).parents('.ui-datepicker').length)
        $('.hasDatepicker').datepicker('hide');
});

Solution 7:^[7]

This is my solution ..

below You may find this code with merged if()s

var datepickerHideFix = function() {

$(document).on("click", function (e) {

    var elee = $(e.target);

    if (!elee.hasClass('hasDatepicker')) {

        if (elee.isChildOf('.ui-datepicker') === false) {

            if (elee.parent().hasClass('ui-datepicker-header') === false) {

                $('.hasDatepicker').datepicker('hide');
            }
        }
    }

    e.stopPropagation();
});
};

Merged if()s

var datepickerHideFix = function() {

$(document).on("click", function (e) {

    var elee = $(e.target);

    if (!elee.hasClass('hasDatepicker') &&
        elee.isChildOf('.ui-datepicker') === false &&
        elee.parent().hasClass('ui-datepicker-header') === false) {

        $('.hasDatepicker').datepicker('hide');
    }

    e.stopPropagation();
});
};

Solution 8:^[8]

I was having the same issue. It looks like this is addressed and fixed in the latest development version, which you can get from here:

http://eternicode.github.io/bootstrap-datepicker/

I'm using the defaults, which seem to work. There must've been a bug in the earlier version(s).

Solution 9:^[9]

in init method for calendar initialization in js file find the div in which your opened calendar is there. Like i have :

div.className="calendar-box";

//i am having datepicker on "#container" element

$(document).unbind('click').bind("click", function (e) {

if($(e.target).parents(".calendar-box").length == 0 && (e.target).id != 'container')
{
       //code to hide calendar..
}   });

Solution 10:^[10]

$(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"/>

Solution 11:^[11]

$("body").on("click", function (e) {
    var elem = e.target.offsetParent;
    if (elem &&
       !elem.classList.contains("ui-datepicker") &&
        !elem.classList.contains("ui-datepicker-calendar") &&
        !elem.classList.contains("ui-datepicker-header") &&
        !elem.hasAttribute("scope") &&
        !elem.classList.contains("ui-datepicker-week-end") &&
        !elem.classList.contains("input-cal-wrapper") &&
        !elem.classList.contains("picto-cal")
    ) {
        $(".hasDatepicker").datepicker("hide");
    }
});

Solution 12:^[12]

i came up with this solution. collected from another source. this work for me. I have a button which pop-up jquery datepicker. and does not close on outside click of datepicker.

<script>
var mouse_is_inside = false;

$(document).ready(function () {        
    $('#j-calender').hover(function(){ 
      mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.ui-datepicker').hide();
    });
});
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Jurijs Nesterovs
Solution 2	Immanuel Comer
Solution 3	Simon Martin
Solution 4	Edward Olamisan
Solution 5	h0mayun
Solution 6	rAthus
Solution 7	Emilion
Solution 8	zxbEPREF
Solution 9	ayc
Solution 10	praveencs
Solution 11	user9978607
Solution 12	Mohammed Sabbir

'jQuery UI datepicker doesn't hide when click outside

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]