Как узнать, поддерживает ли браузер <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
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.