JQuery UI datepicker не скрывает, когда клик снаружи

Я обнаружил проблему с JQuery UI Datepicker на моем сайте.

Когда я нажимаю на ввод, он действительно показывает средство datepicker. Тем не менее, когда я не выбираю какую-либо дату и просто щелкаю вне элемента, она не скрывает средство выбора даты, как я ожидал.

Когда я нажимаю Esc, он исчезает, когда я выбираю день, он исчезает, но когда я щелкаю снаружи, он остается там.

Кто-нибудь может найти проблему?

Ссылка: http://pec.solarismedia.net/index.html#content

Ответы

Ответ 1

У ваших датапикеров класс hasDatepicker, поэтому попробуйте следующее:

$(".hasDatepicker").blur(function(e) { $(this).datepicker("hide"); });

Я на 99% уверен, что сработает!

И FYI, если вы хотите, чтобы он был динамическим (применительно к входам, созданным после), вы можете использовать .on

$(".hasDatepicker").on("blur", function(e) { $(this).datepicker("hide"); });

ОБНОВЛЕНИЕ ^{(PS, чтобы использовать следующее, полностью удалите вышеуказанное из своего кода)}

Чтобы ответить на ваш комментарий, следующее может быть не лучшим решением, но с помощью проб и ошибок (на вашем сайте, используя консоль) это работает! И это относительно коротко по сравнению с альтернативными способами, о которых я думал.

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

Как одна строка

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

проблема, с которой я столкнулся, была в состоянии сказать, когда был нажат значок диапазона, он действительно не желал сотрудничать, поэтому дополнительный имеет проверки класса

Ответ 2

Я немного изменил код из @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');
    }
});

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

Здесь измененное решение, которое сработало для меня:

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

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

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

Ответ 9

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

div.className="calendar-box";

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

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

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

Ответ 10

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

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

Ответ 11

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

Ответ 12

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