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() {
        // 回調(diào)函數(shù)，處理日期選擇器初始化和格式設(shè)置
        // ... (代碼與原文類似，但需根據(jù)實(shí)際情況調(diào)整) ...
    }
});

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!