Тип ввода данных 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>
Подробнее см. ссылку .