Share
In diesem kurzen Tipp zeige ich Ihnen, wie Sie die neue HTML5-Datumseingabe verwenden und dann eine Fallback-jQuery-Benutzeroberflächenlösung für Browser anbieten, die diesen neuen Eingabetyp noch nicht unterstützen.
Das haben wir alle schon durchgemacht. Sie haben ein Formular erstellt und benötigen nun den Benutzer, um ein Datum einzugeben. Aber wie kontrollieren Sie, in welchem Format sie das Datum eingeben? Wäre es nicht einfacher, wenn wir eine Kalendersteuerung oder eine Datumsauswahl verwenden könnten? Absolut! Leider unterstützen nur wenige Browser das neue HTML5 Datum Eingabetyp. Das ist in Ordnung, aber wir verwenden die jQuery-Benutzeroberfläche, um einen Fallback bereitzustellen!
Planen wir zuerst für die Zukunft und nehmen Sie an, dass der Benutzer in einem modernen Browser arbeitet, der ein Datumsauswahlprogramm unterstützt.
Datumsauswahl
Zum Zeitpunkt dieses Schreibens unterstützen nur Webkit und Opera diesen Eingabetyp. In Firefox und Internet Explorer verwendet der Browser standardmäßig ein einfaches Textfeld - nicht ideal!
Verwenden Sie zur Kompensation die jQuery-Benutzeroberfläche.
Das Dateispicker-Tool der jQuery-Benutzeroberfläche funktioniert wunderbar und ist ein Kinderspiel zum "Installieren". Zuerst laden wir eine angepasste Version der jQuery-Benutzeroberfläche herunter. Besuchen Sie die Download-Seite und überprüfen Sie nur die Elemente "Core" und "Datepicker". Lassen Sie alles andere außer Kontrolle.
Klicken Sie auf Download, und Sie erhalten eine ZIP-Datei mit den erforderlichen Dateien. Übertragen Sie über die jQuery-UI-Datei sowie das CSS-Verzeichnis in Ihr Projekt.
Nachdem die jQuery-Benutzeroberfläche in unseren Verzeichnisbaum importiert wurde, müssen wir als Nächstes die erforderlichen Dateien hinzufügen, insbesondere die CSS- und JavaScript-Dateien.
Datumsauswahl
Beachten Sie, wie wir unser benutzerdefiniertes jQuery-UI-Stylesheet, die jQuery-Bibliothek (derzeit Version 1.6) und das angepasste jQuery-UI-Skript enthalten, in das ich umbenannt wurde jquery-ui.js.
Accentsconagua
Datumsauswahl Methode Unsere Basis ist festgelegt; Jetzt müssen wir das DOM nach dem gewünschten Eingabeelement abfragen und das aufrufen Datumsauswahl() Methode darauf.
Diese wenigen Charaktere allein werden es schaffen. Wenn wir die Seite jetzt in Firefox anzeigen und auf das Eingabeelement klicken, wird der Datumsauswahl wirksam.
Was wir hier haben, funktioniert, aber es gibt ein Problem. Wenn wir zu einem erweiterten Browser wie Chrome zurückkehren, haben wir jetzt doppelte Aufgaben. Sowohl der native als auch der Fallback-Datepicker sind gleichzeitig wirksam. Wir brauchen eine Möglichkeit, dies anzugeben, wenn der Browser das unterstützt Datum Eingabetyp, nichts tun. Das ist einfach!
Datumsauswahl
In einem realen Projekt würden Sie das wahrscheinlich wegfegen testen Code zu seiner eigenen Methode oder verwenden Sie Modernizr, aber dies wird den Trick für Testzwecke tun.
Im obigen Code erstellen wir zuerst ein Eingabeelement und versuchen dann, sein Element festzulegen Art Attribut gleich Datum. Wenn der Browser dies nicht tut, bedeutet dies, dass er nicht versteht, was der Browser ist Datum type ist - wir können dann davon ausgehen, dass es sich um einen älteren Browser handelt, und stattdessen den Fallback für die jQuery-Benutzeroberfläche bereitstellen. Einfach!
Das Datepicker-Tool verfügt über eine Reihe von Überschreibungen. Sie können die gesamte Liste hier einsehen.
Lass uns ein paar zusammen untersuchen. Was ist, wenn Sie ein bestimmtes Datumsformat angeben möchten. Eher, als Y / M / D, wir würden lieber verwenden Y-M-D. Dazu verwenden wir die Datumsformat Eigentum.
$ ('# date'). datepicker (dateFormat: 'yy-mm-dd'); Das war einfach. Nehmen wir an, wir möchten nur, dass der Benutzer ein Datum zwischen jetzt und vier Tagen auswählen kann. Dies ist ein Kinderspiel, wenn wir das verwenden maxDate Möglichkeit. Eine praktische Funktion ist, dass wir in vier Tagen relative Begriffe wie +4 verwenden können.
$ ('# date'). datepicker (maxDate: +4); Wir kratzen hier nur die Oberfläche, aber damit sollten Sie anfangen! Browserübergreifende Datumsauswahl innerhalb weniger Minuten!
