Share
I dette raske tipset vil jeg vise deg hvordan du bruker den nye HTML5-datainmatningen, og gir deretter en jQuery UI-løsning for tilbakebetaling for nettleserne som ennå ikke støtter denne nye inngangstypen.
Vi har alle vært der. Du har opprettet et skjema, og nå trenger du brukeren til å skrive inn en dato. Men hvordan kontrollerer du hvilket format de oppgir dato i? Ville det ikke vært enklere om vi kunne bruke en kalenderkontroll eller en datepicker? Absolutt! Dessverre, bare noen få nettlesere støtter den nye HTML5 Dato inngangstype. Det er greit skjønt, vi bruker jQuery UI for å gi en tilbakebetaling!
La oss først planlegge for fremtiden, og anta at brukeren jobber i en moderne nettleser som støtter en datepicker.
Datovelger
På tidspunktet for denne skrivingen støtter bare Webkit og Opera denne innspillstypen. I Firefox og Internet Explorer, vil nettleseren standard til en enkel tekstboks - ikke ideell!
La oss bruke jQuery UI til å kompensere.
JQuery UI datepicker verktøyet fungerer fantastisk, og er en cinch å "installere". Først laster vi ned en tilpasset versjon av jQuery UI, besøker nedlastingssiden, og kontrollerer bare elementene "Core" og "Datepicker". La alt annet være ukontrollert.
Klikk på nedlasting, og du vil motta en zip som inneholder de nødvendige filene. Overfør over jQuery UI-filen, så vel som CSS-katalogen til prosjektet ditt.
Med jQuery UI importert inn i katalogtreet vårt, må vi nå inkludere de nødvendige filene - spesielt CSS og JavaScript-filene.
Datovelger
Legg merke til hvordan vi har tatt med vårt tilpassede jQuery UI-stilark, jQuery-biblioteket - for øyeblikket på versjon 1.6 - og det tilpassede jQuery UI-skriptet, som jeg har omdøpt til jQuery-ui.js.
Accentsconagua
Datovelger Metode Vår base er satt; nå må vi spørre DOM for ønsket inngangselement og ringe til Datovelger() metode på den.
Disse få tegnene alene vil gjøre trikset. Hvis vi nå ser siden i Firefox og klikker på inputelementet, ser du datapunktet i kraft.
Det vi har her fungerer, men det er ett problem. Hvis vi går tilbake til en avansert nettleser som Chrome, er vi nå på dobbelt plikt. Både innfødte og tilbakeleveringsdatopikere er i kraft samtidig. Vi trenger en måte å spesifisere det hvis nettleseren støtter Dato inngangstype, gjør ikke noe. Det er enkelt!
Datovelger
I et virkelighetsprosjekt vil du sannsynligvis abstrahere dette testing kode til egen metode, eller bruk Modernizr, men dette vil gjøre trikset til testformål.
I koden ovenfor lager vi først et innspillingselement, og deretter forsøker du å sette det type attributt lik Dato. Nå hvis nettleseren mislykkes ved å gjøre det - noe som betyr at det ikke forstår hva Dato type er - vi kan da anta at det er en eldre nettleser, og gi jQuery UI-tilbakebetaling i stedet. Enkel!
Datepicker-verktøyet kommer med en rekke overstyringer; Du kan se gjennom hele listen her.
La oss undersøke et par sammen. Hva hvis du vil spesifisere et bestemt datoformat. Heller enn Y / M / D, vi vil heller bruke Y-M-D-. For å gjøre det bruker vi dateformat eiendom.
$ ('# date'). datepicker (dateFormat: 'yy-mm-dd'); Vel det var lett. La oss si at vi bare vil at brukeren skal kunne velge en dato mellom nå og fire dager fra nå. Dette er en cinch når vi bruker maxDate alternativ. En handy-dandy-funksjon er at vi kan bruke relative uttrykk, for eksempel +4, i fire dager fra nå.
$ ('# date'). datepicker (maxDate: +4); Vi skraper bare overflaten her, men dette burde komme i gang! Krypteringsdatabilder i løpet av få minutter!
