Тип ввода данных HTML5. Интерферирование с помощью jQuery Datepicker

Я использую jQuery UI datepicker для выбора даты на моем сайте. Один из моих пользователей только что обновился до новейшей версии Chrome, у которой есть встроенный сборщик дат для HTML5. Большая проблема, поскольку два пользовательских интерфейса перекрывают друг друга. Другая проблема заключается в том, когда пользователь отправляет дату, дата в базе данных возвращается к "0000-00-00" и создает плохие данные.

Если я удалю jQuery datepicker, у большинства пользователей, не использующих самые последние браузеры, не будет выбора даты всплывающих окон. И те, у кого новый браузер, будут иметь два перекрывающих друг друга календаря, которые нарушают приложение. Мой вопрос: как отключить новейшие браузеры от отображения встроенной функции даты и просто продолжать использовать jQuery Datepicker?

Ответ 1

Используйте Modernizr или подобную библиотеку для обнаружения, если браузер поддерживает input type=date, а затем загружает jQuery UI datepicker, если if не делает.

if (!Modernizr.inputtypes.date) {
    $('input[type=date]').datepicker();
}

Ответ 2

Переходите от использования input[type=date] к input[type=text] или используйте Modernizr для обнаружения поддержки родного datepicker. Я написал сообщение о последствиях обоих вариантов здесь - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/.

Ответ 3

Иногда вы не можете изменять типы форм. Например, я использую Symfony2 Bundle FormType.

У меня возникла проблема с использованием Genemu jQuery Datepicker, и я решил эту проблему, добавив кнопку календаря и код lss css.

Вы можете увидеть окончательный результат в этой ссылке

Здесь вы можете прочитать документацию для добавления значка изображения: jQuery UI Datepicker

Затем я просто добавил css, как это (может быть, правила стиля будут разными для вас):

form input[type=date] + img {
    position: relative;
    left: -25px;
}

Ответ 4

Добавить novalidate атрибут в форму, чтобы удалить проверку встроенного браузера.

<form action="login.htm" novalidate>

Подробнее см. ссылку .