it-swarm.com.de

HTML 5-Eingabetyp = "Datum" funktioniert nicht in Firefox

Ich verwende HTML5 <input type="date" />, was in Chrome gut funktioniert, und ich erhalte das Kalender-Popup, um das Datum auszuwählen. 

In Firefox wirkt es jedoch wie ein Textfeld, und es erscheint kein Kalender. 

Nach ein paar Recherchen sehe ich nur wenige Lösungen, die Webshims, Modenizr usw. verwenden, aber ich möchte nicht jQuery verwenden. 

Gibt es dafür eine Alternative? Wie kann ich es in Firefox funktionieren lassen?

16
Aditi

EDIT: <input type="date"/> ist von Firefox 57 teilweise unterstützt .


Firefox unterstützt <input type="date"/> von HTML5 nicht noch nicht.

Sie haben zwei Möglichkeiten: 

  • verwenden Sie immer eine Javascript-Datumsauswahl oder 
  • Überprüfen Sie, ob der Browser das Tag unterstützt, wenn ja, verwenden Sie es, wenn nein, dann ein Javascript Datepicker (jQuery oder ein anderes) verwenden. 

Dies wird als Feature Detection bezeichnet, und Modernizr ist die beliebteste Bibliothek dafür. 

Die Verwendung eines Javascript-Dateispickers ist immer einfacher und schneller, funktioniert jedoch nicht mit deaktiviertem JavaScript (wer kümmert sich), es wird auf dem Handy sehr schlecht funktionieren (dies ist wichtig) und es wird nach alt riechen.

Wenn Sie stattdessen den hybriden Ansatz verwenden, können Sie jetzt jeden Fall abdecken, bis zu dem Tag, an dem jeder Browser den HTML5-Datepicker unterstützt, und zwar in standardisierter Form und ohne Javascript. Es ist zukunftssicher und dies ist besonders wichtig beim mobilen Surfen , wo die Javascript-Datepicker fast unbrauchbar sind.

Dies ist ein Kick-Off-Beispiel, um dies automatisch auf jedem <input type="date"/>-Element jeder Seite durchzuführen:

<script>
    $(function(){           
        if (!Modernizr.inputtypes.date) {
        // If not native HTML5 support, fallback to jQuery datePicker
            $('input[type=date]').datepicker({
                // Consistent format with the HTML5 picker
                    dateFormat : 'yy-mm-dd'
                },
                // Localization
                $.datepicker.regional['it']
            );
        }
    });
</script>

Es verwendet jQuery, da ich jQuery verwende. Sie können jedoch die Teile von jQuery durch Vanilla-Javascript und den Datepicker-Teil durch ein Javascript-Datepicker Ihrer Wahl ersetzen.

23
Andrea Ligios

Es funktioniert jetzt. Seit Firefox 53 können Sie es in about:config aktivieren, indem Sie die Option dom.forms.datetype aktivieren. Siehe http://caniuse.com/#feat=input-datetime und https://developer.mozilla.org/en-US/Firefox/Experimental_features

3

Ich verwende 6 HTML-Selectboxen für die verschiedenen Elemente und OPTION-Anweisungen für die richtigen Werte:

jahr 2000-2050 (oder welchen Bereich Sie wählen) Monat 1-12 (Sie können Monatsnamen anzeigen) Tag 1-31 Stunde 0-23 (oder verwenden Sie 12 Mitternacht - 23.00 Uhr, dies ändert nur die Anzeige) Minute 0-59 Sekunde 0-59 (oder einfach nur 0)

Kein Javascript erforderlich, obwohl ich einige benutze, um ungültige Auswahlen zu vermeiden (wie der 30. Februar). Dies wird bei Monats- oder Jahreswechsel ausgelöst.

1
Mark Lloyd
`input type="date"` is not supported on mozilla

Überprüfen Sie link auf die Liste der unterstützten Ereignisse

1