Работа HTML 5 input type=“date“ в Firefox и IE 10

Быстрый ответ

Для того чтобы осуществить работу HTML5 input type="date" в устаревших версиях браузеров, таких как Firefox и IE 10, воспользуйтесь полифиллами, например, Pikaday или jQuery UI DatePicker.

Пример применения Pikaday:

<input type="text" id="datepicker">
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<script>
    new Pikaday({
        field: document.getElementById('datepicker'),
        format: 'YYYY-MM-DD'
    });
</script>

Пример применения jQuery UI DatePicker:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<input type="text" id="datepicker">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
</script>

Выберите решение, которое наиболее эффективно интегрируется с уже существующими скриптами и стилями вашего проекта.

Поддержка в современных браузерах

Пути к универсальной поддержке

С выпуском Firefox 57+, встроенное в браузер поддержание input type="date" сокращает необходимость применения полифиллов. Однако для более ранних версий браузера Webshims остаётся надёжным вариантом.

Подробнее об этом расскажет наш спикер на видео

Настройка полифилла для повышения производительности

Оптимизируйте работу полифилла, установив параметр waitReady в значение false, что ускорит процесс загрузки. В связке с Modernizr, который позволяет определить возможности конкретного браузера, webshim будет подгружаться только при необходимости.

Гармония стилистики сайта и адаптивного дизайна

Особое внимание уделяйте стилизации и адаптивности датапикеров для того, чтобы они гармонично сочетались с общим дизайном и пользовательским интерфейсом сайта.

Визуализация

Представьте индикатор совместимости в схематическом виде светофора (🚦) на пересечении веб-браузеров:

            Chrome
          🟢 |     |
   Есть поддержка input type "date"!

Firefox и IE 10
          🔴 |     |
     Нужен полифилл!

Зелёный свет для Chrome указывает на наличие поддержки type="date", в то время как красный свет для Firefox и IE 10 указывает на необходимость использования полифиллов.

Практические методы и альтернативы

Работа с jQuery UI DatePicker

В jQuery UI DatePicker важно правильно выставить значение dateFormat, чтобы учесть локализационные стандарты – например, mm/dd/yy в США или dd/mm/yy в Европе.

Возможности Webshims

Для сложных задач обратитесь к Webshims. Используйте демо и конфигуратор на их сайте для точной настройки, включая форматы дат. Обновляйте файлы библиотеки, чтобы обеспечивать совместимость и использовать последние возможности.

Совместное использование с Modernizr

Совместное использование Modernizr с webshims поможет в постепенном улучшении сайта, загружая полифиллы только в случае их необходимости.

Ясные стратегии альтернативных решений

В случаях, когда интерфейс сайта сложен, или используются браузеры без поддержки, рассмотрите применение индивидуальных датапикеров или полей ввода с типом 'text', дополненных валидацией по шаблону.

Полезные материалы

1. <input type="date"> – HTML: HyperText Markup Language | MDN — документация MDN по работе с элементом date.
2. Date and time input types | Can I use... Support tables for HTML5, CSS3, etc — таблица совместимости типов ввода в основных браузерах.
3. Modernizr: Feature Detection Library for HTML5/CSS3 — сайт Modernizr для определения поддержки браузером различных функций HTML5 и CSS3.
4. GitHub – jonstipe/date-polyfill: A date input polyfill — набор полифиллов для input[type="date"].
5. HTML Input Types — обзор всех типов ввода на W3Schools.
6. Пример на CodePen — пример имплементации альтернативного решения для input type="date".