HTML5 Data Input Type Interferire con jQuery Datepicker

Question

Sto utilizzando il DatePicker dell'interfaccia utente jQuery per le selezioni di date sul mio sito. Uno dei miei utenti ha appena effettuato l'aggiornamento alla versione più recente di Chrome, che ha un selettore di date nativo incorporato per HTML5. Il grosso problema in quanto le due interfacce utente si sovrappongono a vicenda. L'altro problema è quando l'utente invia una data, la data nel database ritorna a "0000-00-00" e produce dati non validi.

Se rimuovo il jQuery datepicker, la maggior parte degli utenti che non utilizzano i browser più recenti non avrà un selettore di date popup. E chi ha il browser più recente avrà due calendari sovrapposti che interrompe l'applicazione. La mia domanda è: come disabilitare i browser più recenti dalla visualizzazione della funzione di data incorporata e continuare a utilizzare jQuery Datepicker?

Answer 1

Utilizzare Modernizr o una libreria simile per rilevare se il browser supporta lo input type=date e quindi caricare il datepicker dell'interfaccia utente jQuery, in caso contrario.

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

Answer 2

interruttore O usare input[type=date] a input[type=text] o utilizzare Modernizr per rilevare il supporto per il datepicker nativo. Ho scritto un post sulle implicazioni di entrambe le opzioni qui: http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/.

Answer 3

A volte non è possibile modificare i tipi di modulo. Ad esempio, sto usando FormType di Symfony2 Bundle.

Ho riscontrato questo problema utilizzando Genemu jQuery Datepicker e ho risolto questo problema aggiungendo un pulsante di immagine del calendario e un po 'di codice CSS.

You can see final result in this link

Qui potete leggere la documentazione per l'aggiunta di immagine dell'icona: jQuery UI Datepicker

Poi, ho semplice aggiunto un css come questo (forse le regole di stile sarà diverso per voi):

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

Answer 4

Aggiungi l'attributo novalidate al modulo per rimuovere la convalida del build-in del browser.

<form action="login.htm" novalidate> 

Vai a questa link per maggiori informazioni.