Wie kann ich feststellen, ob ein Browser <input type = 'date'> unterstützt?

82

Mögliches Duplikat:
HTML5-Typerkennung und Plugin-Initialisierung

<input type=date>

Sollte eine Eingabe mit einem vom Benutzeragenten bereitgestellten Datepicker erstellt werden, der jedoch noch nicht allgemein unterstützt wird, verwenden wir einen jQuery UI Datepicker. Wie können wir Browsern erlauben, ihren eigenen Datepicker zu verwenden und nur dann auf die jQuery-Benutzeroberfläche zurückzugreifen, wenn der Browser so etwas nicht hat?

Derzeit denke ich, dass nur Opera einen eingebauten Datepicker hat, aber ein Test für Opera wäre offensichtlich schlecht. Gibt es eine Möglichkeit, diese Funktion zu erkennen (wenn überhaupt tragbar)?

DaedalusFall
quelle
1
Das Erkennen der Datumsunterstützung wird durch die Tatsache erschwert, dass verschiedene Browser Datumsangaben auf verschiedenen Ebenen unterstützen. Einige bieten eine schöne Kalender-Datumsauswahl. Andere bestätigen nur, dass es wie ein Datum aussieht.
rjmunro
2
Genau deshalb habe ich die Frage gestellt. Ich wollte wissen, ob der Browser einen Datepicker hat, nicht, ob er behauptet, Datumseingaben zu verstehen. Es ist kein AFAICT-Duplikat, und die folgenden Antworten helfen nicht weiter. Ich bin einfach nie dazu gekommen, zu aktualisieren oder zu bestreiten. Ich ging einfach mit <input class=datepicker>und benutze immer jquery ui datepicker (die altmodische Art).
DaedalusFall
1
In Desktop-Browsern sollte beachtet werden, dass die Benutzeroberfläche für die Datumseingabe häufig zu wünschen übrig lässt. Selbst wenn sie es unterstützen, möchten Sie es möglicherweise nicht verwenden. Dieses Problem scheint keine Auswirkungen auf mobile Browser zu haben.
Rich Remer

Antworten:

132

Die folgende Methode prüft, ob ein Eingabetyp von den meisten Browsern unterstützt wird:

function checkInput(type) {
    var input = document.createElement("input");
    input.setAttribute("type", type);
    return input.type == type;
}

Aber, wie simonox in den Kommentaren erwähnt, einige Browser (wie Android Lager Browser) behaupten , dass sie irgendeine Art unterstützen (wie heute), aber sie bieten keine UI für Datumseingaben. Deshalb hat simonox die Implementierung verbessert, indem ein unzulässiger Wert in das Datumsfeld gesetzt wurde. Wenn der Browser diese Eingabe bereinigt, könnte er auch einen Datepicker anbieten !!!

function checkDateInput() {
    var input = document.createElement('input');
    input.setAttribute('type','date');

    var notADateValue = 'not-a-date';
    input.setAttribute('value', notADateValue); 

    return (input.value !== notADateValue);
}
Italo Borssatto
quelle
8
Funktioniert nicht im Android Stock Browser, es gibt true zurück, hat aber keine Unterstützung für Datepicker
Björn Andersson
33
Das Abfragen des Typattributs funktioniert nicht in allen Android-Aktienbrowsern. Sie geben vor, inputType = date zu unterstützen, bieten jedoch keine Benutzeroberfläche für Datumseingaben. Diese Feature-Erkennung hat bei mir funktioniert: function () {var el = document.createElement ('input'), notADateValue = 'not-a-date'; el.setAttribute ('Typ', 'Datum'); el.setAttribute ('value', notADateValue); return! (el.value === notADateValue); } Der Trick besteht darin, einen unzulässigen Wert in ein Datumsfeld zu setzen. Wenn der Browser diese Eingabe bereinigt, kann er auch einen Datepicker anbieten.
Simonox
@ Simonox: eine sehr gute Lösung. Danke dafür
Bartłomiej Zalewski
3
Meinst du '! ===' = '! =='? :)
Matty Bileam
1
@MattyBalaam Offensichtlich war das ein Syntaxfehler. Ich habe es behoben :)
Ionică Bizău