HTML5 Data Input Type Zakłócenia z jQuery Datepicker

Question

Używam datepicker interfejsu jQuery UI do wyboru daty w mojej witrynie. Jeden z moich użytkowników właśnie uaktualnił swoją najnowszą wersję Chrome, która ma wbudowany natywny selektor dat dla HTML5. Duży problem, ponieważ dwa interfejsy użytkownika nakładają się na siebie. Drugi problem występuje wtedy, gdy użytkownik przesyła datę, data w bazie danych zmienia się na "0000-00-00" i generuje złe dane.

Po usunięciu datownika jQuery większość użytkowników, którzy nie używają najnowszych najlepszych przeglądarek, nie będzie mieć wyskakującego okna wyboru daty. A ci, którzy mają najnowszą przeglądarkę, będą mieli dwa nakładające się kalendarze, które przerywają aplikację. Moje pytanie brzmi: jak wyłączyć najnowsze przeglądarki z wyświetlania wbudowanej funkcji daty i po prostu kontynuować korzystanie z jQuery Datepicker?

Answer 1

Użyj Modernizr lub podobnej biblioteki, aby wykryć, czy przeglądarka obsługuje input type=date, a następnie załadować datownik jQuery UI, jeśli nie.

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

Answer 2

Albo przełącznik z użyciem input[type=date] do input[type=text] lub użyj modernizr wykryć wsparcia dla rodzimej datepicker. Napisałem post o implikacjach obu opcji tutaj - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/.

Answer 3

Czasami nie można modyfikować typów formularzy. Na przykład używam FormFype Symfony2 Bundle.

Miałem ten problem używając Genemu jQuery Datepicker, i rozwiązałem ten problem, dodając przycisk kalendarza i mały kod css.

You can see final result in this link

Tutaj można zapoznać się z dokumentacją do dodawania ikonę obrazu: jQuery UI Datepicker

Potem prosty dodał css jak to (być może reguły stylów będą różne dla ciebie):

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

Answer 4

Dodaj do formularza atrybut novalidate, aby usunąć sprawdzanie poprawności przeglądarki.

<form action="login.htm" novalidate> 

Aby uzyskać więcej informacji, zobacz to link.