jQuery Datepicker - fermer sur l'entrée cliquez sur

Question

J'utilise jQuery Datepicker et j'ai un petit problème.

Si le sélecteur de date est ouvert et que vous cliquez à nouveau sur le champ de saisie, rien ne se passe. Comment puis-je changer cela .. le sélecteur à fermer à l'entrée cliquez s'il est déjà ouvert?

Merci à l'avance ...

Answer 1

Comme il est lié à focus (par défaut), vous pouvez simplement lier votre propre gestionnaire .mousedown() et il n'influeront pas, comme ceci:

$("#datepicker").datepicker(); 
$("#datepicker").mousedown(function() { 
    $(this).datepicker("hide");  
}); 

You can give it a try here . J'utilise mousedown parce que c'est comme ça que le comportement proche est détecté, donc juste en étant cohérent avec ce comportement.

Answer 2

Depuis que je ne peux pas encore de commentaire ...

Une chose est gênant puisque le datepicker utilise le focus, une fois que vous cachez, vous ne pouvez pas le montrer à nouveau sans flou d'abord et puis en se concentrant (donc cliquer quelque part sinon, cliquez à nouveau).

Je résolu ce problème en ajoutant ce qui suit à la réponse de Nick Craver (à l'intérieur du mousedown):

$(this).blur(); 

Il devrait ressembler à ceci:

$("#datepicker").datepicker(); 
$("#datepicker").mousedown(function() { 
    $(this).datepicker("hide"); 
    $(this).blur(); 
}); 

Answer 3

J'ai trouvé une meilleure façon. hide semble l'empêcher de s'ouvrir lors d'autres clics. Et le flou provoque l'ouverture du sélecteur de date une seconde plus tard.

I utilisé bascule:

$('.datepicker').mousedown(function() { 
    $('#ui-datepicker-div').toggle(); 
}); 

Answer 4

Afin de travailler plus d'un temps (essayez de cliquer plusieurs fois sur l'entrée), vous devez utiliser:

$("#datepicker").datepicker();  
$("#datepicker").mousedown(function() { 
    var cond = $(this).data('datepicker').dpDiv.is(':visible'); 
    $(this).datepicker(cond ? 'hide' : 'show'); 
}); 

Answer 5

Cela fonctionne pour moi (console. méthode log est sortie pour test - supprimer pour la production):

// call addToggleListener function one time to init 
addToggleListener($('.myDatepickerInputs')); 

// the function 
function addToggleListener(elm) 
{ 
    elm.off('mouseup'); 

    elm.on('mouseup', function() 
    { 
     $(this).off('mouseup'); 
     $(this).datepicker("show"); 

     console.log("show"); 

     $(this).on('mouseup', function() 
     { 
      $(this).off('mouseup'); 
      $(this).datepicker("hide"); 
      addToggleListener($(this)); 

      console.log("hide"); 
     }); 
    }); 
} 

Appel de la fonction à l'aide des outils de sélection de date "onClo se "option:

onClose: function() 
{ 
    addToggleListener($(this)); 
} 

Testé avec Google Chrome.