Share
În acest sfat rapid, vă vom arăta cum să utilizați noua intrare a datei HTML5 și apoi să oferiți o soluție de tip jQuery UI pentru browserele care nu acceptă încă acest tip de intrare nou.
Toți am fost acolo. Ați creat un formular și acum aveți nevoie de utilizator pentru a introduce o dată. Dar cum controlați în ce format intră această dată? Nu ar fi mai ușor dacă am putea folosi un control al calendarului sau un set de date? Absolut! Din păcate, totuși, numai câteva browsere acceptă noul HTML5 Data tip de introducere. În regulă, vom folosi jQuery UI pentru a oferi o rezervă!
Să planificăm mai întâi viitorul și să presupunem că utilizatorul lucrează într-un browser modern care acceptă un set de date.
Picker de date
La momentul acestei scrieri, numai Webkit și Opera suportă acest tip de intrare. În Firefox și Internet Explorer, browserul va implica implicit un câmp simplu - nu este ideal!
Să utilizăm jQuery UI pentru a compensa.
Instrumentul jQuery UI datepicker funcționează minunat, și este un cinch pentru a "instala". Mai întâi, descărcăm o versiune personalizată a jQuery UI, vizitează pagina de descărcare și verifică numai elementele "Core" și "Datepicker". Lăsați totul nesupravegheat.
Faceți clic pe descărcare și veți primi un zip care conține fișierele necesare. Transferați fișierul UI jQuery, precum și directorul CSS la proiectul dvs..
Cu ajutorul utilitarului jQuery importat în arborele nostru de directoare, trebuie să includeți în continuare fișierele necesare - în special fișierele CSS și JavaScript.
DatePicker
Observați cum am inclus hârtia de stil jQuery personalizată, biblioteca jQuery - actualmente versiunea 1.6 - și scriptul personalizat jQuery UI, pe care l-am redenumit jQuery-ui.js.
Accentsconagua
DatePicker Metodă Baza noastră este stabilită; acum trebuie să interogăm DOM pentru elementul de intrare dorit și să sunăm DatePicker () pe ea.
Numai acești câțiva caractere vor face truc. Dacă acum vedem pagina în Firefox și dăm clic pe elementul de intrare, vei vedea setul de date în vigoare.
Ceea ce avem aici funcționează, dar există o problemă. Dacă ne întoarcem la un browser avansat, cum ar fi Chrome, acum suntem în dublu serviciu. Atât colecții de date nativi, cât și cei de ultimă oră sunt în vigoare simultan. Avem nevoie de o modalitate de a specifica faptul că, dacă browserul acceptă Data tip de intrare, nu faceți nimic. Asta e ușor!
DatePicker
Într-un proiect din lumea reală, probabil că veți abate acest lucru testarea codificați metoda proprie sau utilizați Modernizr, dar acest lucru va face truc în scopuri de testare.
În codul de mai sus, vom crea mai întâi un element de intrare și apoi încercăm să îl setăm tip atribut egal cu Data. Acum, dacă browserul nu reușește să facă acest lucru - ceea ce înseamnă că nu înțelege ce Data tip este - putem să presupunem că este vorba de un browser mai vechi și să furnizeze înlocuirea jQuery UI. Simplu!
Instrumentul pentru datepicker vine cu o varietate de suprascrieri; puteți examina întreaga listă aici.
Să examinăm un cuplu împreună. Ce se întâmplă dacă doriți să specificați un anumit format de dată. Decat Y / M / D, mai degrabă folosim Y-M-D. Pentru a face acest lucru, folosim formatul datei proprietate.
$ ('# dată'). datepicker (dateFormat: 'yy-mm-dd'); Ei bine, a fost ușor. Apoi, să spunem că dorim doar ca utilizatorul să poată selecta o dată între acum și patru zile de acum. Acesta este un cinch atunci când vom folosi maxDate opțiune. O caracteristică la îndemână este că putem folosi termeni relativi, cum ar fi +4, timp de patru zile de acum.
$ ('# dată'). datepicker (maxDate: +4); Noi doar zgâriem suprafața aici, dar asta ar trebui să începi! Descărcări de date încrucișate în câteva minute!
