jQuery Datepicker - Schließen bei Eingabe klicken

Question

Ich benutze jQuery Datepicker und ich habe ein kleines Problem.

Wenn der Datepicker geöffnet ist und Sie erneut auf das Eingabefeld klicken, passiert nichts. Wie kann ich das ändern .. der Picker bei Eingabe geschlossen werden soll, wenn er bereits geöffnet ist?

Vielen Dank im Voraus ...

Answer 1

Da es focus (Standard) gebunden ist, können Sie nur Ihre eigenen .mousedown() Handler binden und es wird nicht stören, wie folgt aus:

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

You can give it a try here . Ich benutze mousedown, denn so wird auch das nahe Verhalten erkannt, also einfach konsistent, um dieses Verhalten zukunftssicherer zu machen.

Answer 2

Da kann ich noch nicht kommentieren ...

Eine ärgerliche Sache ist, da die Datepicker Fokus verwendet, sobald Sie es verstecken, können Sie es nicht mehr anzeigen, ohne vorher zu verwischen und dann konzentriert (so irgendwo klicken sonst, dann klick nochmal rein).

Ich löste dies durch die folgenden Nick Craver Antwort Hinzufügen (im mousedown-):

$(this).blur(); 

es sollte also wie folgt aussehen:

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

Answer 3

ich einen besseren Weg gefunden. Verbergen scheint zu bewirken, dass es sich bei weiteren Klicks nicht öffnet. Und die Unschärfe bewirkt, dass die Datumsauswahl eine Sekunde später geöffnet wird.

I verwendet Knebel:

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

Answer 4

Um mehr als ein Mal zu arbeiten (versuchen Sie mehrmals am Eingang klicken) sollten Sie verwenden:

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

Answer 5

Dies funktioniert für mich (Konsole. Protokollmethode wird zum Testen ausgegeben - zur Produktion entfernen):

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

Aufruf der Funktion unter Verwendung der Datumsauswahl "onClo Se "Option:

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

Getestet mit Google Chrome.