jQuery UI datepicker не скрывается при щелчке снаружи

Я немного изменил код из @SaraVanaN, и он выглядит так:

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

Я изменил эту строку $(document).on("click", function(e) { но это не имеет значения, как вы делаете это .on("click") или .click() и эта строка !$(elem).parents(".ui-datepicker").length Я взял из .parent() работал на меня, вы должны перепроверить свои веб-страницы datepicker, потому что прямо сейчас, для меня, когда вы нажимаете на дату div который всплывает с датами закрывается мгновенно, и вы не можете выбрать ни одну из дат...

проверка здесь для лучших решений, чем то, что у меня было, но я думаю, что мне нравится мое решение

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

Если вы хотите не скрывать календарь, когда вы нажимаете next / prev month применить следующий код..

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

вот модифицированное решение, которое сработало для меня:

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

вот более короткая версия выше код немного легче читать:

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

Это мое решение ..

ниже вы можете найти этот код с объединенным 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();
});
};

объединены, если () 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();
});
};

У меня была та же проблема. Похоже, это адресовано и исправлено в последней версии, который вы можете скачать здесь:

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

Я использую значения по умолчанию, которые, похоже, работают. Должно быть, в более ранних версиях была ошибка.

в методе init для инициализации календаря в файле js найдите div, в котором находится открытый календарь. Как у меня :

div.className="calendar-box";

/ / у меня есть datepicker на элементе "#container"

$(документ).unbind('click').bind ("click", функция (e) {

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

вот мое решение:

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

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

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