Programmering

HTML5 Datovelger

Jeg la nylig ut at jeg hadde bestemt meg for å bruke Opera i HTML5-demonstrasjonene mine for RMOUG Training Days 2011. Som jeg sa i det innlegget, er en stor grunn til å legge Opera-nettleseren til settet som demonstreres, at den støtter noen av HTML5-funksjonene bedre enn de andre nettleserne. Dette innlegget vil illustrere en av disse tilfellene: HTML5 Date Pickers.

En av de små, men fine tingene ved å bruke Flex eller et JavaScript-bibliotek som JQuery, er tilgjengeligheten av innebygde mekanismer for brukervennlige inngangskontroller. Spesielt er en god datovelger alltid verdsatt.

HTML5 er for tiden planlagt for å tilby en standard datovelger-widget som kan brukes med HTML-koder. I dette innlegget ser jeg på tilstanden til HTML5-datovelgerne i nyere ikke-betaversjoner av fem populære nettlesere (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8 og Opera 11).

HTML støtter forskjellige inndatafelt via inndatakoden. De forskjellige typene inntastingsfelt spesifiseres via inngang elementets type Egenskap. HTML5 øker antall tilgjengelige types som kan spesifiseres. Flere av de nye verdiene for type attributt inkluderer de som er relatert til dato / tid: Dato, dato tid, datetime-local, måned, uke, og tid. Hver av disse er illustrert i følgende HTML-kodebit.

   HTML5 datovelgere demonstrert 
InngangstypeInndatafelt
Dato
dato tid
datetime-local
måned
uke
tid

Av de fem nettleserne jeg tidligere har oppført, gir Opera den klart mest sofistikerte implementeringen av datoen / klokkeslettet types av inngang stikkord. Fra og med det positive viser de første flere skjermbildene hvordan denne enkle HTML-gjengivelsen i Opera 11 viser.

Opera 11 Innledende gjengivelse av side

Opera 11 Input Tag "date" Attribute

Opera 11 Input Tag "datetime" Attribute

Opera 11 Input Tag "datetime-local" Attribute

Opera 11 Input Tag "måned" -attributt

Operas implementering fremhever hele måneden som skal velges.

Opera 11 Input Tag "week" Attribute

Opera trekker frem uken som blir valgt ut.

Opera 11 Input Tag "time" Attribute

Opera 11 - Alle valgte felt

Operas implementering av dato / klokkeslett-felt er imponerende. Jeg skulle ønske det samme kunne sies for de andre nettleserne som ikke er beta. Dessverre gir de andre nettleserne ikke støtte for disse felttypene hvor som helst i nærheten av dette elegante. Faktisk tror jeg ikke det er verdt å ta med alle skjermbildene deres her. I stedet viser jeg ganske enkelt et skjermbilde av hvert etter å ha fylt ut alle feltene. I de fleste tilfeller behandlet nettleserne ganske enkelt disse feltene som enkle "tekst" -felt.

Firefox 3.6 Datovelgere: De er bare tekst

Internet Explorer 8 datovelgere: De er bare tekst

Safari 5 Date Pickers: De er bare tekst med fokusheving

Chrome 8 Date Pickers: Ikke helt der

Selv om det ikke er like elegant som Operas behandling av dato- / tidsfelt, behandler Chrome-nettleseren disse feltene som mer enn tekst og begrenser hva som kan legges inn i feltene. Dessverre er det ingen fine dato / klokkeslett-popup-vinduer som Opera gir. Likevel, det fokuserte feltmarkeringen er fint, og det faktum at valgte data er noe dato / tid som i format hjelper.

Konklusjon

Jeg gleder meg til dagen da de store nettleserne kontinuerlig støtter standardiserte dato- / tidskontroller, slik at enkle HTML-"input" -koder med passende attributter vil gjengi elegante og stilistiske dato / klokkeslettvelgere i hvilken som helst nettleser. Opera 11 leder for tiden pakken og gir den beste illustrasjonen av hva som kan være.

Denne historien, "HTML5 Date Picker" ble opprinnelig utgitt av JavaWorld.

$config[zx-auto] not found$config[zx-overlay] not found