site logo

Datum a čas ve formuláři podle HTML5

Zapsat správné, existující datum do formuláře s ohledem na formát, kterému rozumí serverový skript, není triviální záležitost. Aplikace, které vyžadují zadání datumu (jízdní řády, objednávky ubytování) usnadňují tento úkol většinou pomocí javascriptových kalendářů. Standard HTML5 navrhuje pro datum a čas celou rodinu nových formulářových prvků typu dateTime.

Browsery Firefox a IE zpracují všechny elementy rodiny dateTime jako běžný text a dovolí zapsat (a odeslat) jakýkoli text. Browsery Opera, Safari a Chrome těmto prvkům rozumí, ale chovají se poněkud rozdílně.

Pro účely testování tohoto prvku je připraven následující miniformulář se všemi variantami vstupního prvku pro čas a datum, doplněný o výpis použitých atributů.

použitý atribut typ elementu formulář
required date
  datetime
  datetime-local
min="2007-09" month
max="2017-W20" week
step="5" time
vzhled kalendářových prvků

Vzhled formulářových prvků datetime

Vpravo jsou screenshoty z ukázkového formuláře nahoře. FF a IE zatím neumí pracovat s těmito prvky a proto ve screenshotu chybí. Konečný vzhled se možná ještě změní.

Pomocí CSS mají všechny prvky jednotně nastaveny vlastnosti width a height. Dále je nastavena vlastnost margin: 0; protože Chrome má defaultně nastavenou tuto vlastnost na 2px, zatímco Opera má 0. Pokud nastavíte barvu pozadí background, vzhled elementů se přepne do podoby klasik, tak jak je známý z win2000.

Opera má drobné problémy s jednotným nastavením šířky prvků, sjednocením padding (week) a defaultním zarovnáním údaje (date). Prvky datetime jsou složeny ze dvou částí, jeden pro datum, druhý pro čas, ale v HTML kódu je deklarován jen jeden prvek. Opera navíc zobrazí text "UTC" jako součást elementu (označení, že jde o čas odpovídající nultému poledníku) i když toto upozornění by mohlo být spíše součástí popisu políčka v label.

Safari (a starší Chrome) zobrazují všechny prvky stejně, součástí elementu je spinner pro nastavení hodnoty. Všechny prvky nastaví rozměry jsou podle W3C box modelu, liší se jen formátem zobrazené hodnoty.

Chrome 16 zrušil prvky pro zadávání datumu a času pomocí spinneru a ponechal náhradní řešení, kdy se tyto prvky chovají jako type="text". V Chrome 20 se objevil nový prvek date, Chrome 23 přidal prvek time, Chrome 25 pak další prvky.

Browsery IE a Firefox zobrazují tyto prvky jako běžný prvek text a je možné zde zapsat jakýkoli text. To je taky důvod proč ještě nelze tyto HTML5 prvky běžně používat a spoléhat se na nativní validaci na straně klienta.

Formát hodnoty prvků datetime

Norma ISO 8601 sjednocuje velmi rozdílné způsoby zápisu datumu a času, detaily najdete na Wikipedii. Ukázku ISO formátů můžete vidět na screenshotu z browseru Safari. Bez ohledu na viditelný formát dat zobrazený v elementech jsou v tomto ISO formátu data odesílány na server jako součást formuláře. Také javascriptové funkce při dotazu na hodnotu formulářového prvku vrací data v tomto ISO formátu.

Chrome zobrazí datum podle národních zvyklostí, odvozené od jazyka operačního systému, odeslaná data jsou ale vždy ve formátu ISO. Uživatel vidí ve formulářovém prvku datum se známým formátem, ale server obdrží data vždy ve standardním formátu. To usnadní ukládání dat do databáze. Ostatně takto se zobrazují i defaultní texty na tlačítku submit, nebo file.

Opera a Safari zobrazují i odesílají datum ve formátu ISO. To by mohl být ideální stav, kdy stejný formát platí pro vstup i výstup datumu, jednotně pro celý svět. Takový formát ovšem není příliš obvyklý ani čitelný, běžný uživatel by asi byl zmatený. Ani pokus celosvětově sjednotit používání stejných jednotek pro teploty, míry a váhy se nepodařilo.

Ovládání formulářových prvků datetime

lokalizovaný kalendářový widget Opera

Vlevo je screenshot kalendáře (date picker widget) pro výběr datumu v browseru Opera. Je lokalizovaný a označení měsíců a dnů v týdnu závisí na zvoleném jazyku browseru (Menu > Nastavení > Nastavení > Jazyk). Podobný, nikoli totožný, kalendář je k dispozici i v browseru Chrome.

V browseru Opera se datumové hodnoty nastavují jen pomocí kalendáře. Přímý zápis datumu pomocí klávesníce není možný, tedy ani nelze vybrat neplatné datum a tak odpadá případná validace datumu. Hodinové a minutové údaje lze nastavit pomocí tlačítek typu spinner (součást elementu), pomocí číselné klávesnice, nebo pomocí kláves nahoru a dolů. Z klávesnice je tak možné zapsat (a také odeslat) neplatný čas.

Ovládání kalendáře pomocí myši nedělá problémy, ovládání klávesnicí má své mouchy. Limity nastavené pomocí atributů min, max jsou v kalendáři aktivní a datum které překračuje nastavené limity nelze zvolit.

Safari i starší Chrome 8 nastavují všechny potřebné hodnoty pomocí prvku spinner, nebo přímým zápisem z klávesnice. Pro datum chybí údaj který den v týdnu je vybrán.

Chrome zavedl výběr datumu podobný jako má Opera. Kliknutím na šipku vyskočí kalendář, kliknutím do textové části se umožní přímý zápis hodnoty z klávesnice, nebo je možné použít spinner pro krokování. Je tak možné zapsat neplatné datum, které je automaticky opraveno.

Vyskakovací kalendář je výhodnější. Nepotřebujete mít při ruce papírový kalendář když plánujete dovolenou a objednáváte ubytování, nebo plánujete cestování pomocí jízdního řádu. Ostatně podobně funguje většina řešení pro simulaci formulářového prvku date.

vývoj vzhledu prvku date

Hledání nejvýhodnějšího formátu, ovládání i vzhledu prvku date vidíte na screenshotu vlevo. Není jasné jak bude vypadat a jak se bude ovládat finální verze tohoto prvku, je ale jasné, že Chrome optimální variantu hledá. Chrome 27 přidal k některým input prvkům křížek pro smazání zapsané hodnoty hodnoty. Browsery IE a Firefox podporu pro tento prvek zatím nezavedly.

Je škoda že standard HTML5 zapoměl na nějakou obdobu tágu <calendar>, který by mohl vypadat nějak podobně jako je na screenshotu, s možností samostatného zvýraznění dne podle zadaného atributu.

Atributy formulářových prvků datetime

Velká rodina formulářových elementů datetime má 6 prvků a rozlišují se podle atributu type. V zásadě jsou důležité dva prvky  type="date" pro samostatné nastavení datumu a  type="time" pro nastavení času. Pro nastavení společné hodnoty datumu i času v jednom formulářovém prvku jsou vhodné  type="datetime" a  type="datetime-local". První je pro nastavení času podle UTC, tedy světového času, druhý je vhodný pro určení běžného, lokálního času. Element  type="month" umožní vybrat rok a měsíc, prvek  type="week" vybere kalendářní týden.

Pomocí atributů  min a max je možné nastavit limity přípustných hodnot. Atribut  value použijeme, když je potřeba mít pole formuláře vyplněné již při načtení formuláře, s možností toto pole změnit. Např. editování již existujícího záznamu z databáze. Hodnoty těchto atributů musí odpovídat formátu podle ISO 8601. Atribut  step se uplatní pro krokování času. Defaultní hodnota je 60 (sekundy), tedy 1 minuta, a tato hodnota skryje zobrazení sekund.

Atribut required použijeme tehdy když hodnota musí být vyplněna (prvek nesmí zůstat prázdný). Pak nativní validace znemožní odeslat formulář s nevyplněným, nebo chybně vyplněným políčkem.

Poznámky

Pokud máte poněkud rozpačitý pocit a jste zklamaní z rodiny formulářových prvků pro výběr datumu a času podle HTML5, nejste sami. Obávám se, že poměrně radikální změna formátu datumu a zejména míchání písmen a časového údaje způsobí, že tvůrci webových aplikací zůstanou raději u současných osvědčených kalendářových skriptů.

Můj osobní dojem z návrhu formulářových prvků pro výběr datumu a času podle HTML5, je bezmyšlenková implementace standardu ISO 8601. Pro každý standardizovaný formát časového údaje je navržen odlišný typ elementu. Často méně znamená více. V praxi by stačily jen dva elementy: type="date" a  type="time". Položením těchto prvků vedle sebe lze nahradit prvky datetime, podobně jak je vidět v Opeře. Takové řešení navíc zjednoduší stylování formulářových prvků.

Doufejme, že vývojáři browserů se nakonec dohodnou na stejném zobrazení, formátování i ovládání těchto prvků. Asi bude ještě nějakou dobu trvat, než budou připraveny k běžnému použití.

updated 2013-02-25