Jak mogę sprawdzić, czy przeglądarka obsługuje <input type = 'date'>

83

Możliwy duplikat:
wykrywanie typu HTML5 i inicjalizacja wtyczki

<input type=date>

Powinien utworzyć dane wejściowe z (opcjonalnym) selektorem daty dostarczonym przez klienta użytkownika, ale nie jest jeszcze szeroko obsługiwany, więc używamy jQuery UI Datepicker. Jak możemy pozwolić przeglądarkom na używanie ich własnego datepickera i korzystanie z interfejsu użytkownika jQuery tylko wtedy, gdy przeglądarka tego nie posiada?

Obecnie myślę, że tylko Opera ma wbudowany datepicker, ale test dla Opery byłby oczywiście zły. Czy istnieje sposób, w jaki można wykryć tę funkcję (jeśli w ogóle można ją przenośnie)?

DaedalusFall
źródło
1
Wykrywanie obsługi dat jest skomplikowane ze względu na fakt, że różne przeglądarki obsługują daty na różnych poziomach. Niektóre oferują ładny kalendarz do wybierania dat. Inni po prostu potwierdzają, że wygląda na datę.
rjmunro,
2
Dokładnie dlaczego zadałem to pytanie. Chciałem wiedzieć, czy przeglądarka ma datepicker, a nie czy twierdzi, że rozumie dane wejściowe. To nie jest AFAICT duplikat, a poniższe odpowiedzi nie pomagają. Po prostu nigdy nie doszedłem do aktualizacji ani kwestionowania. Po prostu poszedłem <input class=datepicker>i zawsze używam jquery ui datepicker (staromodny sposób).
DaedalusFall
1
Należy zauważyć, że w przeglądarkach stacjonarnych interfejs wprowadzania daty często pozostawia wiele do życzenia. Nawet jeśli go wspierają, możesz nie chcieć z niego korzystać. Wydaje się, że ten problem nie dotyczy przeglądarek mobilnych.
bogate wspomnienie

Odpowiedzi:

134

Poniższa metoda sprawdza, czy jakiś typ danych wejściowych jest obsługiwany przez większość przeglądarek:

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

Ale, jak wspomniał simonox w komentarzach, niektóre przeglądarki (jako przeglądarki giełdowe Androida) udają, że obsługują jakiś typ (jako datę), ale nie oferują interfejsu użytkownika do wprowadzania daty. Dlatego simonox ulepszył implementację, wykorzystując sztuczkę polegającą na ustawieniu niedozwolonej wartości w polu daty. Jeśli przeglądarka oczyszcza to wejście, może również zaoferować wybór daty !!!

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
źródło
8
Nie działa w przeglądarce zapasów Androida, zwraca prawdę, ale nie obsługuje DatePicker
Björn Andersson
33
Pytanie o atrybut type nie działa we wszystkich przeglądarkach giełdowych Androida. Udają, że obsługują inputType = date, ale nie oferują interfejsu użytkownika dla danych wejściowych. To wykrywanie funkcji zadziałało dla mnie: function () {var el = document.createElement ('input'), notADateValue = 'not-a-date'; el.setAttribute ('typ', 'data'); el.setAttribute ('value', notADateValue); return! (el.value === notADateValue); } Sztuczka polega na ustawieniu niedozwolonej wartości w polu daty. Jeśli przeglądarka oczyszcza te dane wejściowe, może również zaoferować wybór daty.
simonox
3
Czy masz na myśli '! ===' = '! =='? :)
Matty Balaam
1
@MattyBalaam Oczywiście był to błąd składniowy. Naprawiłem to :)
Ionică Bizău
Działa świetnie. Możesz łatwo rozszerzyć tę metodę, aby wykrywać inne typy HTML5.
Gusstavv Gil