Не работает HTML5 date picker в Safari: решение проблемы

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

Для решения проблемы неотображения HTML5 date picker в Safari, рекомендуется использовать условный полифилл. Если обнаруживается отсутствие поддержки input[type="date"], примените библиотеку Pikaday:

if (document.createElement('input').type !== 'date') {
    new Pikaday({ field: document.getElementById('datepicker') });
}

Этот встроенный метод проверки гарантирует надежную работу date picker в разных браузерах. Обратите внимание, что в Safari 14.1 и более новых версиях поддержка HTML5 date picker уже реализована, поэтому важно проводить тестирование на различных версиях браузера.

Подробное руководство

Проверка поддержки браузером и создание резервного варианта

Категорически рекомендуется проверить поддержку браузером атрибута type для HTML5 date picker:

var dateInput = document.querySelector('input[type="date"]');
if (!dateInput || dateInput.type !== 'date' || !dateInput.checkValidity()) {
    // Здесь загружается полифилл
}

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

Заполнитель: Ваш лучший помощник

Поместите маску гггг-мм-дд в атрибут placeholder. Это ненавязчивое указание на необходимый формат ввода данных, которое не конфликтует с родной поддержкой:

<input type="date" placeholder="гггг-мм-дд" />

Создание комфортного интерфейса для пользователя в браузерах без поддержки

При отсутствии родной поддержки, для улучшения пользовательского взаимодействия в Safari и других браузерах, рационально использовать jQuery UI date picker:

if (document.createElement('input').type !== 'date') {
   $('#datepicker').datepicker();
}

Применение обнаружения браузера и условной загрузки

Для тех браузеров, которые не очень склонны к HTML5 date picker, можно использовать обнаружение браузера и по мере необходимости загружать дополнительные библиотеки, такие как jQuery UI:

var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
if (isSafari && document.querySelector('input[type="date"]').type !== 'date') {
    // Здесь загружается jQuery UI DatePicker
}

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

Воспринимайте HTML5 date picker как гоночный автомобиль 🏎️. Вы плавно движетесь по дороге последних версий браузеров 💨, но встречая старые версии, такие как Safari 🐌, сталкиваетесь с неожиданными трудностями. Однако преодолевая столкнувшиеся препятствия ❌, вы открываете путь к гладкой дороге поддерживаемых технологий 📅.

🏎️ + 💨 = 📅 (Быстрое и безпроблемное отображение)

🏎️ + 🐌 = ❌ (Проблемы при взаимодействии со старыми версиями браузеров)

🏎️ + 🛠️ + 🐌 = 📅 (Исправлены проблемы, и селектор появился в Safari)

Адаптация к будущим обновлениям браузеров

Safari движется навстречу

Apple продолжает радовать пользователей улучшенными возможностями в каждом новом релизе. Safari 15 обещает стать весомым шагом в поддержке HTML5, и родная поддержка date picker станет еще более полноценной.

Дисциплина синтаксиса и структуры

Строгое следование синтаксису и структуре кода — ключевой аспект успешной работы веб-приложений в различных браузерах. Не уходите от установленных стандартов!

Собранные рекомендации по устранению проблем

Работа со спецификой Safari

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

Инструменты разработчика

Успех разработчика во многом зависит от выбранного инструментария и доступных ресурсов. Библиотеки полифиллов, документация MDN и поддержка сообщества разработчиков — это ключевые инструменты, которые должны быть в арсенале каждого специалиста.

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

1. Can I use... Support tables for HTML5, CSS3, etc
2. Примечания к выпуску Safari 14 | Документация для разработчиков Apple
3. 119175 – <input type="date"> не отображает нужные контролы для работы с датами
4. <input type="date"> – HTML: Язык гипертекстовой разметки | MDN
5. Как сделать <input type="date"> работающим во всех браузерах? Существуют ли другие варианты? – Stack Overflow
6. GitHub – jonstipe/date-polyfill: Полифилл для <input type="date"> для браузеров, которые пока не поддерживают его.
7. Документация Modernizr