Ich habe ein Feld HTML5 <input type="date" /> und möchte sofort auf geänderte Daten antworten.
Gegenwärtig verdeckt das Eingabefeld die Daten, die sich ändern, wenn das Datum geändert wird. Daher würde ich die Kalenderauswahl nach einem Datumswechsel lieber automatisch schließen.
Ich habe versucht, .blur () bei Änderung, aber das hat keine Auswirkungen. Das Ereignis wird ausgelöst und ich kann den neuen Datumswert abrufen, aber die Datumsauswahl ist nicht ausgeblendet. Irgendwelche Vorschläge sind willkommen.
%Vor%[UPDATE]
Inzwischen habe ich auch ein zusätzliches Eingabeelement auf der Seite ( <input type="text" id="hideMyCalendar" /> ) und anstelle von input.blur(); hinzugefügt, um eine $('#hideMyCalendar').focus(); zu machen, aber dies versteckt auch die Auswahl nicht, obwohl der Fokus wird visuell zu einer anderen Kontrolle gebracht. Ich nehme an, dass der einzige Weg wäre, eine chrome (webkit) spezifische Methode aufzurufen, aber ich habe keine solche Methode (noch) zu existieren.
Ich würde es vorziehen, die Kalenderauswahl nach dem Ändern eines Datums automatisch zu schließen
HTML 5 input type="date" legt nicht fest, wie diese Eingabe von Browsern realisiert werden soll. Es kann ein grafischer Datumszeiger sein, es kann eine einfache Validierung für eine Benutzereingabe sein - was auch immer der Browserhersteller implementieren möchte.
Das Ausblenden des "Datumsempfängers", der tatsächlich Browser-abhängig ist, ist also nicht übergreifend möglich.
Sie können jedoch den jQuery UI-Datapicker verwenden, wo Sie die vollständige Kontrolle darüber haben, wie er ein- und ausgeblendet wird.
30.01.14 Das funktioniert nicht mehr
Das ist hässlich, aber es funktioniert für Chrome.
Nur so konnte ich das html5-Datum nach Auswahl eines Datums schließen. Entfernen Sie einfach das Datumsattribut und wenden Sie es erneut an. Der Wert bleibt erhalten und es sieht so aus, als wäre er manuell geschlossen worden.
UPDATE:
Dies ist die Methode, die ich verwende, um alle Datumstypen wie folgt zu schließen:
%Vor%Sie haben gesagt (in Ihr Kommentar ):
Ich bevorzuge das Eingabeelement HTML5, weil ich hoffe, dass dies die Einheit im Web bringt.
Und doch sind Sie bereit, eine webkit-spezifische Methode aufzurufen? (in das Update auf die Frage ):
Ich nehme an, dass der einzige Weg wäre, eine chrome (webkit) spezifische Methode aufzurufen, aber ich habe (noch) keine solche Methode zu existieren.
Ich denke, das widerspricht dem Zweck. Dann benötigen Sie eine Opera-spezifische Methode, eine IE-spezifische Methode, eine Firefox-spezifische Methode und so weiter ... nicht mehr Einheit mit dem Web .
Wenn Sie wirklich nur eine einzige Browser-Erfahrung wünschen, gehen Sie zu jQuery UI . Es gibt Ihnen nicht nur die Vielseitigkeit, um das zu tun, was Sie wollen (wie Nil'z zeigt ), es gibt auch Sie das gleiche Verhalten über heterogene Browser.
Anstatt HTML5 zu verwenden, wo verfügbar. Was Sie tun sollten, ist, auf HTML5 zurückzugreifen, wenn JavaScript nicht verfügbar ist. Dies geschieht mit unverrückbaren JavaScript-Prinzipien . In der Tat ist jQuery dazu bestimmt, dies standardmäßig zu tun ...
Erstellen Sie einfach Ihr HTML5 (und HTML4-kompatibles) Feld:
%Vor%Ihre jQuery:
%Vor%Und dein Skript:
%Vor%Das Endergebnis wird sein, dass alle Browser, in denen jQuery laufen kann, den jQuery-basierten Datepicker verwenden, wenn JavaScript nicht verfügbar ist, dann HTML5-Datepicker und schließlich, wenn der Browser HTML5 nicht unterstützt, dann nur ein Textfeld. Das ist eine graziöse Verschlechterung.
Und Sie werden natürlich die Methode hide von jQuery datepicker verwenden :
%Vor%Hinweis: +1 zu Nil'z
Ich weiß, dass ich die Frage nicht beantwortet habe, aber das löst das Problem.
Tags und Links javascript jquery html5