Как узнать, поддерживает ли браузер <input type = 'date'>

83

Возможный дубликат:
определение типа HTML5 и инициализация плагина

<input type=date>

Должен создать ввод с (необязательным) пользовательским агентом, предоставляемым datepicker, но он еще не широко поддерживается, поэтому мы используем jQuery UI Datepicker. Как мы можем разрешить браузерам использовать свой собственный datepicker и вернуться к пользовательскому интерфейсу jQuery, только если в браузере этого нет?

В настоящее время я думаю, что только Opera имеет встроенный datepicker, но тест для Opera, очевидно, будет плохим. Есть ли способ обнаружить эту функцию (если она вообще может быть портативной)?

ДедалПадение
источник
1
Обнаружение поддержки даты осложняется тем фактом, что разные браузеры поддерживают даты на разных уровнях. Некоторые предлагают удобный выбор даты в календаре. Другие просто подтверждают, что это похоже на свидание.
rjmunro
2
Именно поэтому я задал этот вопрос. Я хотел знать, есть ли в браузере средство выбора даты, а не то, что он утверждает, что понимает ввод даты. Это не AFAICT дубликат, и ответы ниже не помогают. Я просто так и не дошел до обновления или оспаривания. Я просто пошел <input class=datepicker>и всегда использую jquery ui datepicker (старомодный способ).
DaedalusFall
1
Следует отметить, что в настольных браузерах пользовательский интерфейс ввода даты часто оставляет желать лучшего. Даже если они его поддерживают, возможно, вы не захотите его использовать. Эта проблема, похоже, не влияет на мобильные браузеры.
Rich Remer 06

Ответы:

134

Приведенный ниже метод проверяет, поддерживается ли какой-либо тип ввода большинством браузеров:

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

Но, как упоминалось в комментариях simonox , некоторые браузеры (например, стандартные браузеры Android) делают вид, что они поддерживают какой-то тип (например, дату), но они не предлагают пользовательский интерфейс для ввода даты. Поэтому simonox улучшил реализацию, используя уловку установки недопустимого значения в поле даты. Если браузер дезинфицирует этот ввод, он также может предложить datepicker !!!

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, возвращает true, но не поддерживает datepicker
Бьорн Андерссон,
33
Запрос атрибута type работает не во всех стандартных браузерах Android. Они делают вид, что поддерживают inputType = date, но не предлагают пользовательский интерфейс для ввода даты. У меня сработало это обнаружение функции: function () {var el = document.createElement ('input'), notADateValue = 'not-a-date'; el.setAttribute ('тип', 'дата'); el.setAttribute ('значение', notADateValue); возврат! (el.value === notADateValue); } Уловка состоит в том, чтобы установить недопустимое значение в поле даты. Если браузер очищает этот ввод, он также может предложить средство выбора даты.
simonox
3
Вы имеете в виду '! ===' = '! =='? :)
Мэтти Валаам
1
@MattyBalaam Очевидно, это была синтаксическая ошибка. Я починил :)
Ionică Bizău
Прекрасно работает. Вы можете легко расширить этот метод для обнаружения других типов HTML5.
Gusstavv Gil