jQuery UI Datepicker öffnet sich automatisch im Dialog

Question

Ich habe einen Datepicker, der innerhalb des jQuery-Dialogobjekts verwendet wird. Die Quelle des Inhalts des Dialogs wird geladen mit .load(). Innerhalb des Dialogs habe ich ein Skript erstellt, das einen Datumsauswahl für die Texteingabe erstellt.

$("#date").datepicker({ ... }); 

Wenn ich den Dialog zum ersten Mal öffnen - alles ist in Ordnung, aber wenn ich es schließen und wieder öffnen wieder, wird der Datepicker automatisch ausgelöst (und es gibt keine solche Option wie autoOpen:false) Gibt es eine Möglichkeit das zu verhindern oder was mache ich falsch?

Answer 1

Ich hatte dieses genaue Problem und löste es nur mit einer leichten Variation der Technik von Tvanfosson. Aus irgendeinem Grund musste ich das "click" -Ereignis manuell an das Datepicker-Feld wie unten anhängen.

$('#dialog').dialog({ 
open: function(event, ui) { 
    $(ui).find('#date').datepicker().click(function(){ 
     $(this).datepicker('show'); 
    }); 
}, 
close: function(event,ui) { 
    $(ui).find('#date').datepicker('destroy'); 
}}); 

(Sorry - ich habe es vorgezogen habe dies als Kommentar zu tvanfosson des Posten zu Posten, aber nicht die erforderlichen rep.)

Answer 2

Sie könnten darüber nachdenken, den Datepicker beim Schließen des Dialogfelds zu löschen und ihn im geöffneten Ereignishandler für das Dialogfeld zu erstellen, anstatt ihn als Skript in die Dialogerstellung einzubeziehen.

$('#dialog').dialog({ 
    open: function(event, ui) { 
     $(ui).find('#date').datepicker(); 
    }, 
    close: function(event,ui) { 
     $(ui).find('#date').datepicker('destroy'); 
    } 
}); 

Sie auch mit verschiedenen Veranstaltungen/Methoden experimentieren können, um zu sehen, ob Sie wirklich neu erstellen müssen, aber ich denke, dass dies funktionieren würde.

Answer 3

Ich war ein ähnliches Problem. Ich habe einen jquery Datepicker innerhalb eines jquery ui Dialogs. Die Datumsauswahl wurde automatisch in IE geöffnet, als ich den Dialog öffnete. Es war nicht zu tun, dass in Firefox oder Chrome ... ich das Problem behoben, indem die picker bei der Erstellung in dem $ (document) deaktivieren .ready etwa so:

$('.ConfirmMove #from').datepicker({ 
    duration: '' 
}).datepicker('disable'); 

Dann, als ich den Dialog öffnete diesen picker enthält ich ermöglichte es in dem offenen Ereignishandler des Dialogs:

$(".ConfirmMove").dialog({ 
    close: function() { 
    $('.ConfirmMove #from').datepicker('disable'); 
    }, 
    open: function() { 
    $('.ConfirmMove #from').datepicker('enable'); 
    } 
}); 

Sie müssen auch daran denken, sie zu deaktivieren zurück, wenn Sie den Dialog zu schließen.

Auf diese Weise zerstören Sie nicht auch jedes Mal, wenn Sie den Dialog öffnen und schließen, den Datepicker.

Answer 4

Viele einfache Weise, die ich gefunden:

$("#dialogPopper").click(
        function() { 
         $("#date").datepicker("disable"); 
         $("#dialog").dialog("open"); 
         $("#date").datepicker("enable"); 
         return false; 
        } 
       ); 

Answer 5

Wenn Sie das Feld picker am Anfang des Dialogs setzen sie automatisch geöffnet werden. Sie können eine versteckte Eingabe am Anfang des Dialogs platzieren.

<input type="text" style="width: 0; height: 0; top: -100px; position: absolute;"/> 

Answer 6

Ich weiß, dass dies eine alte Frage, aber eine Lösung, die für mich gearbeitet wurde Auslösen eines Kalendersymbol:

$(".date").datepicker({ 
    showOn: "button", 
    buttonImage: "../css/imgs/calendar.gif", 
    buttonImageOnly: true 
}); 

Answer 7

Dies ist, was ich tat, um mein Problem zu beheben.

Dieser Code wird bei der Erstellung des Dialogfelds verwendet.

Auf diese Weise, wenn der Dialog geöffnet wird, wird es Fokus in einem anderen Steuerelement erhalten.

Sie können das Timeout für eine kleinere Menge an Verzögerung testen, aber 100 war in Ordnung für mich.

Answer 8

Der Grund ist: Ihr erstes Element innerhalb des modalen Formulars ist das Datepicker-Textfeld, und wenn das Modal ausgelöst wird, ist das aktive Steuerelement derjenige, der den Datepicker enthält.

fand ich heraus, zwei alternative Lösungen:

1. Ändern Sie die Reihenfolge der Felder. Vermeiden Sie den mit Datumspicker, um an erster Stelle zu bleiben.

2. Setzen Sie datepicker nicht in einem separaten Codeabschnitt auf das Feld, sondern innerhalb der Funktion, die den Dialog öffnet (direkt nach dem Öffnen von $("#dialog").dialog("open");).

Answer 9

Aus irgendeinem Grund der Kalender dieses Verhalten gestoppt hat, wenn ich in der Animation Option im initializer gefüllt:

showAnim:

Answer 10

Der Grund Picker öffnet sich allein Drop ist, dass das Eingabefeld bleibt fokussiert, nachdem Sie den Picker zum ersten Mal geöffnet haben.

Sie müssen es verschwimmen:

$input.datepicker({ 
    onClose: function(dateText) { 
    $(this).trigger('blur'); 
    } 
}); 

Answer 11

Von Quellcode fand ich, dass jQuery.Dialog immer focusin Ereignis auf Elemente im Dialogspuren und löst focus Ereignis auf diesem Element nach Dialog gewinnt aktiven Zustand. Um zu verhindern, nur dieses Verhalten stoppen Ereignispropagierung von Element sprudeln in fokussiert wird

$("#input").on("focusin", function (e) { 
    return false; // or e.stopPropagation(); 
}).datepicker(); 

• Hinweis, dass es Unterschiede zwischen jQuery Versionen
• Ticket http://bugs.jqueryui.com/ticket/9125

Answer 12

Es ist nur Dialog Fokus. api.jqueryui.com/dialog/

Nach dem Öffnen eines Dialogfelds Fokus wird automatisch auf das erste Element bewegt, die im Dialog mit dem Autofokus-Attribut

Die erste die folgende

1. Das erste Element entspricht: tabbable Element innerhalb des Dialoginhalts
2. die erste: tabbable Element innerhalb des Dialoges buttonpane
3. Die Schaltfläche zum schließen des Dialogs
4. Der Dialog selbst

Eine Lösung besteht darin, das Attribut autofocus für andere Felder als datepicker zu verwenden.