Finden einer Date Picker -Eingangslösung für Bootstrap

Best Practices für das Cross-Browser-Datum in

in

<input type="date"> In diesem Artikel werden die Herausforderungen und besten Lösungen für die Implementierung von Datumseingabefeldern in verschiedenen Browsern untersucht. Aufgrund der inkonsistenten Browser -Unterstützung für lang und der Unkenntnis von

-attributen benötigen wir eine robuste Lösung, um mit Datumsformaten, UTC/lokalen Zeitproblemen und Unterschieden zwischen Browsern umzugehen.

Schlüsselpunkte:

• Die Unterstützung von <input type="date"> Browser für lang und
Attribute ist ungleichmäßig, was dazu führt, dass die Eingabe-Widgets in nicht einheimischen Sprachen nicht angezeigt werden.
Viele JavaScript -Lösungen versuchen, die Unterstützung für die Datumseingabe zu verbessern, aber nur wenige Skripte können zwei verschiedene Datumsformate verarbeiten, die gleichzeitig Daten anzeigen und speichern.
• altField DatePicker für JQuery UI ist eine gut getestete und unterstützte Bibliothek, die Formatierungsprobleme mit der Option
löst. Während es in Bootstrap integriert werden kann, muss eine neue Themendatei erstellt werden, um eine visuelle Konsistenz zu gewährleisten.
jQuery UI DatePicker unterstützt das Feld DateTime nicht. Das TimePicker -Plugin von Trent Richardson arbeitet als Lösung, die sich im Einklang mit den Standard -DatePicker -Widgets verhält und Dateien ohne zusätzliche Arbeit verwendet.

Browserkompatibilitätstest:

date Wir haben verschiedene Datumseingangstypen (datetime, datetime-local, time, month, week,

) getestet und gefunden:

• datetime Kein Browser -Unterstützung
Eingabetyp.
• datetime-local Browser, die time unterstützen, unterstützen normalerweise auch month und week, während
weniger unterstützend ist.
• lang Alle Browser scheinen die
Eigenschaften zu ignorieren, und das Eingabe -Widget verwendet immer das vom System festgelegte Datums- und Uhrzeitformat.

Wählen Sie das Fallback -Skript aus:

Viele JavaScript-Lösungen können die Unterstützung für den Cross-Browser-Datumeingang verbessern, aber viele haben Probleme: Die Wartung ist nicht aktiv oder kann nicht unterschiedliche Datumsformate verarbeiten, die Daten anzeigen und speichern.

Vorteile von JQuery UI DatePicker:

altField JQuery UI DatePicker ist eine gut getestete und gut gepflegte Bibliothek mit der

-Option, die ideal für die Behandlung von Unterschieden in den Anzeigformaten und Speichernformaten ist. Es kann in Bootstrap integriert werden, erfordert jedoch ein benutzerdefiniertes Thema.

Bedingung Lade- und Code -Implementierung:

Um JQuery UI DatePicker nur bei Bedarf zu laden, können Sie Modernizr zur Erkennung von Funktionen verwenden:

Modernizr.load({
    test: Modernizr.inputtypes.date,
    nope: [
        'jquery-ui-master/ui/core.js',
        'jquery-ui-master/ui/datepicker.js',
        'jquery-ui-master/ui/i18n/datepicker-it.js', // 替换为你的语言文件
        'jquery-ui-master/themes/base/core.css',
        'jquery-ui-master/themes/base/datepicker.css',
        'jquery-ui-master/themes/base/theme.css'
    ],
    callback: function() {
        // 回调函数，处理日期选择器初始化和格式设置
        // ... (代码与原文类似，但需根据实际情况调整) ...
    }
});

In der Callback -Funktion <input type="date"> müssen wir für jedes altField -Element ein verstecktes datepicker erstellen, um das Datum im ISO -Format zu speichern und die

-Methode zu verwenden, um das Anzeigeformat zu legen und das Format zu speichern.

Bootstrap -Integration:

Um besser in Bootstrap zu integrieren, müssen Sie eine benutzerdefinierte datepicker.less -Datei mit den Variablen und Glyphicons -Symbol von Bootstrap erstellen. Dies erfordert, dass die Variablen und Glyphicons -Dateien von Bootstrap importieren und den Stil der JQuery -Benutzeroberfläche mithilfe der weniger Variablen umschreiben.

TimePicker-Plug-In:

Für DateTime-Felder können Sie das TimePicker-Add-On von Trent Richardson verwenden, das nahtlos in Datumspicker integriert ist.

Zusammenfassung:

Durch Kombination der Feature-Erkennung von Modernizr, JQuery UI DatePickers altField Optionen und benutzerdefinierten Themen können wir eine Cross-Browser-kompatible und einfach zugeordnete Datumseingabelösung erstellen. Denken Sie daran, dass diese Tipps schließlich veraltet sein können, da die Browser die Unterstützung für die native Datumseingabe weiter verbessern.

(Das Bild hält das ursprüngliche Textformat und die Position unverändert)

(Der FAQ -Teil wird weggelassen, da es eine schwache Korrelation mit dem Kerninhalt aufweist und länger ist, sodass Sie es bei Bedarf selbst hinzufügen können)

Das obige ist der detaillierte Inhalt vonFinden einer Date Picker -Eingangslösung für Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!