Share
In questo suggerimento rapido, ti mostrerò come utilizzare il nuovo input di data HTML5 e quindi fornirò una soluzione di interfaccia utente fallback jQuery per i browser che non supportano ancora questo nuovo tipo di input.
Siamo stati tutti lì. Hai creato un modulo e ora hai bisogno che l'utente inserisca una data. Ma come si controlla in che formato inseriscono la data? Non sarebbe più facile se potessimo usare un controllo del calendario o un Datepicker? Assolutamente! Sfortunatamente, però, solo un paio di browser supportano il nuovo HTML5 Data tipo di input. Va bene però, utilizzeremo l'interfaccia utente di jQuery per fornire una riserva!
Iniziamo a pianificare per il futuro e supponiamo che l'utente stia lavorando in un browser moderno che supporti un DatePicker.
Date picker
Al momento di questa stesura, solo Webkit e Opera supportano questo tipo di input. In Firefox e Internet Explorer, il browser verrà automaticamente impostato su una semplice casella di testo, non ideale!
Usiamo l'interfaccia utente di jQuery per compensare.
Lo strumento jQuery UI datepicker funziona meravigliosamente, ed è un gioco da ragazzi per "installare". Per prima cosa, scarichiamo una versione personalizzata dell'interfaccia utente di jQuery, visitiamo la pagina di download e controlliamo solo gli elementi "Core" e "Datepicker". Lascia tutto il resto deselezionato.
Fai clic su download e riceverai un file zip contenente i file necessari. Trasferisci sul tuo progetto il file dell'interfaccia utente jQuery e la directory CSS.
Con l'interfaccia utente di jQuery importata nel nostro albero delle directory, abbiamo bisogno di includere i file necessari, in particolare i file CSS e JavaScript.
Date picker
Nota come abbiamo incluso il nostro foglio di stile dell'interfaccia utente jQuery personalizzato, la libreria jQuery - attualmente alla versione 1.6 - e lo script dell'interfaccia utente jQuery personalizzato, che ho rinominato in jquery-ui.js.
Accentsconagua
date picker Metodo La nostra base è impostata; ora dobbiamo interrogare il DOM per l'elemento di input desiderato e chiamare il date picker() metodo su di esso.
Solo questi pochi personaggi faranno il trucco. Se ora visualizziamo la pagina in Firefox e clicchiamo sull'elemento di input, vedremo il datepicker in effetti.
Quello che abbiamo qui funziona, ma c'è un problema. Se torniamo a un browser avanzato come Chrome, siamo ora in doppio dovere. Entrambi i datapicker nativi e di fallback sono attivi contemporaneamente. Abbiamo bisogno di un modo per specificarlo, se il browser supporta il Data tipo di input, non fare nulla Questo è facile!
Date picker
In un progetto del mondo reale, è probabile che astrarre questo analisi codice per il proprio metodo, o utilizzare Modernizr, ma questo farà il trucco per scopi di test.
Nel codice qui sopra, prima creiamo un elemento di input, quindi cerchiamo di impostarlo genere attributo uguale a Data. Ora se il browser non riesce a farlo - significa che non capisce cosa Data type is - possiamo quindi supporre che sia un browser più vecchio e fornire invece il fallback dell'interfaccia utente jQuery. Semplice!
Lo strumento datepicker viene fornito con una varietà di sostituzioni; puoi rivedere l'intero elenco qui.
Esaminiamo una coppia insieme. Cosa succede se si desidera specificare un formato di data specifico. Piuttosto che Y / M / D, preferiamo usare Y-M-D. Per fare ciò, usiamo il formato data proprietà.
$ ('# date'). datepicker (date date: 'aa-mm-gg'); Bene, è stato facile. Quindi, diciamo che vogliamo solo che l'utente sia in grado di selezionare una data tra ora e quattro giorni da adesso. Questo è un gioco da ragazzi quando usiamo il MaxDate opzione. Una caratteristica a portata di mano è che possiamo usare termini relativi, come ad esempio +4, per quattro giorni da adesso.
$ ('# date'). datepicker (maxDate: +4); Stiamo solo grattando la superficie qui, ma questo dovrebbe iniziare! Datepicker cross-browser in pochi minuti!
