web-dev-qa-db-fra.com

jQuery UI datepicker ne se cache pas lorsque vous cliquez à l'extérieur

J'ai trouvé un problème avec jQuery UI Datepicker sur mon site.

Lorsque je clique sur l'entrée, elle affiche correctement un datepicker. Néanmoins, lorsque je ne sélectionne aucune date et que je clique juste en dehors de l'élément, cela ne masque pas le sélecteur de date comme je m'y attendais.

Lorsque j'appuie sur Echap, il disparaît, lorsque je sélectionne un jour, il disparaît mais lorsque je clique à l'extérieur, il y reste.

Y a-t-il quelqu'un qui est capable de trouver le problème?

Lien: http://pec.solarismedia.net/index.html#content

jqueryjquery-uidatepickerjquery-ui-datepicker
17
FilipBenes

Vos datepickers ont la classe hasDatepicker, alors essayez ceci:

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

Je suis sûr à 99% que cela fonctionnera!

Et pour info, si vous voulez qu'il soit dynamique (appliquez aux entrées créées après), vous pouvez utiliser .on

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

MISE À JOUR  (PS, pour utiliser ce qui suit, supprimez complètement ce qui précède de votre code)

Pour répondre à votre commentaire, ce qui suit n'est peut-être pas la meilleure solution, mais grâce aux essais et erreurs (sur votre site, à l'aide de la console), cela fonctionne! Et c'est relativement court par rapport à d'autres manières auxquelles j'ai pensé.

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

Comme une seule ligne

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

le problème que j'ai rencontré était de pouvoir dire quand l'icône span a été cliquée, il ne voulait pas vraiment coopérer, donc le supplément a des vérifications de classe

22
SpYk3HH

J'ai légèrement modifié le code de @SaraVanaN et il ressemble à ceci:

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

j'ai changé cette ligne $(document).on("click", function(e) { mais peu importe comment vous le faites avec .on("click") ou .click() et cette ligne !$(elem).parents(".ui-datepicker").length j'ai pris de .parent() a fonctionné pour moi, vous devriez revérifier le sélecteur de date de vos pages Web, car en ce moment, pour moi, lorsque vous cliquez sur une date, le div qui s'affiche avec les dates se ferme instantanément et vous ne pouvez pas choisissez l'une des dates ...

10
Jurijs Nesterovs

Vérifier ici pour de meilleures solutions que ce que j'avais, mais je pense que j'aime ma 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"/>
3
Immanuel Comer

Si vous ne voulez pas masquer le calendrier lorsque vous cliquez sur le mois suivant/précédent, appliquez le code suivant.

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

Voici une solution modifiée qui a fonctionné pour moi:

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

Voici une version plus courte du code ci-dessus, un peu plus facile à lire:

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

J'avais le même problème. Il semble que cela soit résolu et corrigé dans la dernière version de développement, que vous pouvez obtenir à partir d'ici:

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

J'utilise les valeurs par défaut, qui semblent fonctionner. Il devait y avoir un bogue dans les versions antérieures.

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

Voici ma 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();
});
0
h0mayun

Ceci est ma solution ..

ci-dessous Vous pouvez trouver ce code avec des if fusionné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();
});
};

Fusionné si () 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();
});
};
0
Emilion
$(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"/>
0
praveencs

dans la méthode init pour l'initialisation du calendrier dans le fichier js, trouvez la div dans laquelle se trouve votre calendrier ouvert. Comme j'ai:

div.className="calendar-box";

// j'ai un sélecteur de date sur l'élément "#container"

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

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