HTML5 alat za odabir datuma

Nedavno sam objavio da sam odlučio koristiti Opera u svojim HTML5 demonstracijama za RMOUG Training Days 2011. Kao što sam rekao u tom postu, veliki razlog za dodavanje web preglednika Opera u demonstrirani skup je taj što podržava neke od HTML5 značajki bolji od ostalih preglednika. Ovaj će post ilustrirati jedan od ovih slučajeva: HTML5 birači datuma.

Jedna od malih, ali lijepih stvari vezanih uz upotrebu Flex-a ili JavaScript biblioteke poput JQuery-a jest dostupnost ugrađenih mehanizama za user-friendly kontrole unosa. Uvijek se cijeni dobar berač spojeva.

HTML5 je trenutno predviđen da ponudi standardni widget za odabir datuma koji se može koristiti s HTML oznakama. U ovom postu gledam na stanje birača datuma HTML5 u nedavnim ne-beta verzijama pet popularnih web preglednika (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8 i Opera 11).

HTML podržava različita polja za unos putem ulazne oznake. Različite vrste polja za unos navode se putem atributa inputelementa type. HTML5 dramatično povećava broj dostupnih types koji se mogu specificirati. Nekoliko novih vrijednosti za typeatribut uključuju one koje se odnose na datum / vrijeme: date, datetime, datetime-local, month, week, i time. Svaki od njih ilustriran je sljedećim isječkom HTML koda.

   HTML5 Date Pickers Demonstrated    
    
Input Type Input Field
date
datetime
datetime-local
month
week
time

Od pet web preglednicima sam prethodno navedenih, Opera nudi daleko najsofisticiraniji provedbu datum / vrijeme types od inputoznake. Počevši od pozitivnog, prvih nekoliko snimaka zaslona pokazuju kako se ovaj jednostavni HTML prikazuje u Opera 11.

Opera 11 Početno prikazivanje stranice

Atributa "datum" ulazne oznake Opera 11

Unos oznake Opera 11 "datum i vrijeme"

Ulazna oznaka Opera 11 "datetime-local" atribut

Opera 11 Atribut ulazne oznake "mjesec"

Implementacija Opere ističe cijeli mjesec koji će biti odabran.

Opera 11 Atribut ulazne oznake "tjedan"

Opera ističe tjedan koji će biti odabran.

Svojstvo "vrijeme" ulazne oznake Opera 11

Opera 11 - Odabrana su sva polja za unos

Implementacija polja za unos datuma / vremena u Opera je impresivna. Volio bih da se isto može reći i za ostale ne-beta preglednike. Nažalost, ostali preglednici ne pružaju podršku za ove vrste polja ni blizu ovog elegantnog. Zapravo, mislim da se ovdje uopće ne isplati uključiti sve njihove snimke zaslona. Umjesto toga, jednostavno pokažem snimku zaslona svakog nakon popunjavanja svih polja. U većini slučajeva preglednici su jednostavno tretirali ta polja kao jednostavna polja tipa "tekst".

Firefox 3.6 Alati za odabir datuma: Oni su samo tekst

Alati za odabir datuma u programu Internet Explorer 8: Oni su samo tekst

Izbornici datuma Safari 5: Oni su samo tekst s naglaskom na fokus

Alati za odabir datuma Chrome 8: nema ih baš tu

Iako nije toliko elegantan kao Opera kako postupa s poljima datuma / vremena, preglednik Chrome ta polja tretira kao više od teksta i ograničava ono što se može unijeti u polja. Nažalost, nema lijepih skočnih prozora za odabir datuma / vremena kao što ih nudi Opera. Ipak, lijepo je isticanje fokusiranog polja i pomaže činjenica da su odabrani podaci donekle datum / vrijeme kao u formatu.

Zaključak

Radujem se danu kada glavni preglednici dosljedno podržavaju standardizirane kontrole datuma / vremena, tako da će jednostavne HTML "ulazne" oznake s odgovarajućim atributima prikazati elegantne i stilske birače datuma / vremena u bilo kojem pregledniku. Opera 11 trenutno predvodi i pruža najbolju ilustraciju onoga što bi moglo biti.

Ovu je priču "HTML5 Odabir datuma" izvorno objavio JavaWorld.