Я обнаружил проблему с JQuery UI Datepicker на моем сайте.
Когда я нажимаю на ввод, он действительно показывает средство datepicker. Тем не менее, когда я не выбираю какую-либо дату и просто щелкаю вне элемента, она не скрывает средство выбора даты, как я ожидал.
Когда я нажимаю Esc, он исчезает, когда я выбираю день, он исчезает, но когда я щелкаю снаружи, он остается там.
Кто-нибудь может найти проблему?
У ваших датапикеров класс 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"); });
проблема, с которой я столкнулся, была в состоянии сказать, когда был нажат значок диапазона, он действительно не желал сотрудничать, поэтому дополнительный имеет проверки класса
Я немного изменил код из @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, которая появляется с датами, закрывается мгновенно, и вы не можете выбрать ни одну из дат...
Проверка здесь лучших решений, чем у меня, но я думаю, что мне нравится мое решение
$(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"/>Если вы хотите, не скрывайте календарь, когда нажимаете следующий/предыдущий месяц, применяйте следующий код.
$(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
$(document).unbind('click'). bind ("click", function (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");
}
});