Як я можу зрозуміти, чи підтримує браузер <input type = 'date'>


83

Можливий дублікат:
виявлення типу HTML5 та ініціалізація плагіна

<input type=date>

Потрібно створити вхідні дані із (необов’язковим) користувальницьким агентом, який надається datepicker, але він ще не широко підтримується, тому ми використовуємо jQuery UI Datepicker. Як ми можемо дозволити браузерам використовувати власну програму вибору дати та повернутися до користувальницького інтерфейсу jQuery, лише якщо у браузері такого немає?

В даний час я думаю, що лише Opera має вбудований засіб вибору дати, але тест на Opera, очевидно, буде поганим. Чи є спосіб виявити цю функцію (якщо вона взагалі може бути переносною)?


1
Виявлення підтримки дати ускладнюється тим, що різні браузери підтримують дати на різних рівнях. Деякі пропонують приємний підбір календаря дат. Інші просто підтверджують, що це схоже на дату.
rjmunro

2
Саме тому я поставив питання. Я хотів би знати, чи має браузер датчик, а не якщо він стверджує, що розуміє введення дати. Це не дубль AFAICT, і відповіді нижче не допомагають. Я просто ніколи не потрапляв до оновлення чи змагання. Я просто пішов <input class=datepicker>і завжди використовую jquery ui datepicker (старомодний спосіб).
ДедалВосень

1
Слід зазначити, що в браузерах настільних ПК інтерфейс введення дати часто залишає бажати кращого. Навіть якщо вони це підтримують, ви можете не захотіти ним користуватися. Здається, ця проблема не впливає на мобільні браузери.
багатий ремер

Відповіді:


134

Нижче наведений метод перевіряє, чи підтримується деякий тип введення більшістю браузерів:

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

Але, як згадувалось у коментарях simonox , деякі браузери (як браузери для акцій Android) роблять вигляд, що підтримують певний тип (як дату), але вони не пропонують інтерфейс для введення дати. Тож simonox покращив реалізацію, використовуючи фокус встановлення неправомірного значення в поле дати. Якщо браузер дезінфікує це введення, він також може запропонувати вибір дати !!!

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

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

    return (input.value !== notADateValue);
}

8
Не працює в браузері для Android, він повертає істину, але не має підтримки вибору дати
Бьорн Андерссон,

33
Запит на атрибут type працює не у всіх браузерах Android, що продають акції. Вони роблять вигляд, що підтримують inputType = date, але не пропонують інтерфейс для введення дати. Це виявлення функцій спрацювало для мене: function () {var el = document.createElement ('input'), notADateValue = 'not-a-date'; el.setAttribute ('тип', 'дата'); el.setAttribute ('value', notADateValue); повернути! (el.value === notADateValue); } Фокус полягає у встановленні неправомірного значення в поле дати. Якщо браузер дезінфікує це введення, він також може запропонувати вибір дати.
simonox

3
Ви маєте на увазі '! ===' = '! =='? :)
Matty Balaam

1
@MattyBalaam Очевидно, що це була синтаксична помилка. Я це виправив :)
Ionică Bizău

Працює ідеально. Ви можете легко розширити цей метод для виявлення інших типів HTML5.
Gusstavv Gil
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.