Не работает тег input type="date" в Safari. Решение проблемы
Блог
Делимся с Вами своими знаниями и новостями
20.04.2021

Не работает тег input type=date в Safari. Решение проблемы

Не работает тег input type="date" в Safari. Решение проблемы

В данной статье Вы найдете решение проблемы тега <input type=»date»>, а именно его не отображение в браузере Safari. Многие пользователи в своих формах часто используют тег <input type=»date»>. Оно и понятно, тег весьма удобным. Но есть проблема, в некоторых браузерах, в частности в Safari, он заменяется на обычный text. Согласитесь, это крайне неудобно. Но на помощь к нам бежит Datepicker от JQuery.

Большая вероятность, что Вы уже используете эту javascript библиотеку в своем проекте, поэтому подключать ее нет необходимости, но если все-таки нужно, то вставляем в секцию <head></head> Вашего сайта следующее:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">

Далее, присваиваем нашему input следующий id, кстати его Вы можете выбрать какой угодно.

<input type="text" id="datepicker">

Отлично, теперь остался последний штрих. Перед тегом </body> добавляем обработчик:

<script>
   $( function() {
     $( "#datepicker" ).datepicker();
   } );
</script>

Все, можете наслаждаться. Теперь в каждом браузере, включая Safari будет работать выбор даты.
P.S. Не забывайте подписываться на мой канал в Telegram, где Вас ждет просто хорошая музыка.

Метки:

Свяжитесь с нами уже сейчас

Вы привыкли видеть здесь форму обратной связи. Ведь так? Ее делают почти все. Но исследуя поведение людей, мы пришли к выводу, что форма совершенно не нужна. В любом случае все сводится к обсуждению Вашего проекта в WhatsApp или Telegram. А зачем нам тратить Ваше время на заполнение различных форм? Поэтому, пишите в Telegram или в WhatsApp.