Share
I det här snabba tipset visar jag hur du använder den nya HTML5-datuminmatningen och ger sedan en back-up jQuery UI-lösning för webbläsarna som ännu inte stöder denna nya inmatningstyp.
Vi har alla varit där. Du har skapat en blankett, och nu behöver du användaren att ange ett datum. Men hur kontrollerar du vilket format de anger datumet i? Skulle det inte bli lättare om vi kunde använda en kalenderkontroll eller en datumpicker? Absolut! Tyvärr, bara ett par webbläsare stöder den nya HTML5 datum ingångstyp. Det är okej, men vi använder jQuery UI för att ge en återgång!
Låt oss först planera för framtiden och anta att användaren arbetar i en modern webbläsare som stöder en datepicker.
Datumväljare
Vid det här skrivandet stöder endast Webkit och Opera denna inmatningstyp. I Firefox och Internet Explorer kommer webbläsaren som standard till en enkel textruta - inte idealisk!
Låt oss använda jQuery UI för att kompensera.
JQuery UI DatePicker-verktyget fungerar fantastiskt och är en film för att "installera". Först laddar vi ner en anpassad version av jQuery UI, Besök nedladdningssidan, och kontrollerar endast "Core" och "Datepicker" -alternativen. Lämna allt annat okontrollerat.
Klicka på nedladdningen, så får du en zip som innehåller de nödvändiga filerna. Överför över jQuery-användarfilen och CSS-katalogen till ditt projekt.
Med jQuery-gränssnittet importerat till vårt katalogtom måste vi sedan inkludera de nödvändiga filerna - speciellt CSS- och JavaScript-filerna.
Datumväljare
Lägg märke till hur vi har inkluderat vårt anpassade jQuery UI-stilark, jQuery-biblioteket - för närvarande på version 1.6 - och det anpassade jQuery UI-skriptet, som jag har bytt namn till jQuery-ui.js.
Accentsconagua
Datumväljare Metod Vår bas är inställd; nu måste vi fråga DOM för önskat ingångselement och ringa Datumväljare() metod på det.
Dessa få tecken ensamma kommer att göra tricket. Om vi nu ser sidan i Firefox och klickar på inmatningselementet ser du datumpicker i effekt.
Det vi har här fungerar, men det finns ett problem. Om vi återgår till en avancerad webbläsare som Chrome, är vi nu tvungna. Både inhemska och fallback datumpickers är i kraft samtidigt. Vi behöver ett sätt att ange det, om webbläsaren stöder datum ingångstyp, gör ingenting. Det är lätt!
Datumväljare
I ett verkligt projekt skulle du troligen abstrakta detta testning kod till sin egen metod, eller använd Modernizr, men det här gör tricket för teständamål.
I koden ovan skapar vi först ett inmatningselement och försöker sedan ställa in det typ attribut lika med datum. Nu om webbläsaren misslyckas med att göra det - vilket betyder att den inte förstår vad datum typ är - vi kan då anta att det är en äldre webbläsare och tillhandahålla jQuery UI-fallbacken istället. Enkel!
Datepicker-verktyget kommer med en mängd olika överstyrningar. Du kan granska hela listan här.
Låt oss undersöka ett par tillsammans. Vad händer om du vill ange ett visst datumformat. Hellre än Y / M / D, vi skulle hellre använda Y-M-D. För att göra så använder vi datumformat fast egendom.
$ ('# date'). datepicker (dateFormat: 'yy-mm-dd'); Jo det var lätt. Låt oss säga att vi bara vill att användaren ska kunna välja ett datum mellan nu och fyra dagar från och med nu. Det här är en cinch när vi använder maxDate alternativ. En handy-dandy-funktion är att vi kan använda relativa termer, till exempel +4, i fyra dagar från nu.
$ ('# date'). Datepicker (maxDate: +4); Vi klipper bara ytan här, men det borde komma igång! Webbläsarens datumpickers inom några minuter!
