CODEWITHSUNDEEP
jqueryjquery-uidatepickerjquery-ui-datepicker
FilipBenes
FilipBenes

Reputation: 335

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

Upvotes: 19

Views: 54604

Answers (13)

Mohammed Sabbir
Mohammed Sabbir

Reputation: 103

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>

Upvotes: 0

user9978607
user9978607

Reputation: 1

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

Upvotes: 0

blented
blented

Reputation: 2807

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

Upvotes: 1

praveencs
praveencs

Reputation: 9

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

Upvotes: 0

Immanuel Comer
Immanuel Comer

Reputation: 31

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

Upvotes: 3

h0mayun
h0mayun

Reputation: 3601

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

Upvotes: 1

Edward Olamisan
Edward Olamisan

Reputation: 891

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

Upvotes: 3

aru
aru

Reputation: 778

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

Upvotes: 0

zxbEPREF
zxbEPREF

Reputation: 202

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

Upvotes: 0

Jurijs Nesterovs
Jurijs Nesterovs

Reputation: 255

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

Upvotes: 11

Emilion
Emilion

Reputation: 41

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

Upvotes: 0

SaraVanaN
SaraVanaN

Reputation: 329

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

Upvotes: 2

SpYk3HH
SpYk3HH

Reputation: 22570

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

Upvotes: 24

Related Questions