O webu
Jak zadávat datum?

U webových aplikacích je často nutné nechat uživateli vyplnit datum a čas.

(Jazyková vsuvka: správně se píše datum bez data, nikoliv bez datumu.)

Jedna možnost je dát na stránku prostý <input> a ten nějak předvyplnit, aby návštěvník odhadl formát (buď přímo value, nebo placeholder).

Případně příklad uvést jako popisek políčka.

Například 23. 7. 2014

Pohodlnější ale nejspíš bude umožnit výběr z kalendáře.

Výběr z kalendáře

Nabídnout kalendář po kliknutí do pole umí přímo některé prohlížeče (stará i nová Opera a Chrome/Webkit) pomocí <input type=date>.

Takto by to mělo vypadat v Chrome:

Výběr data v Chrome

Je to ale spíš nouzové řešení. Kvalitní pole s kalendářem by se mělo chovat inteligentněji.

  1. Umožnit kompletně ruční zadání. Pro výběr data hodně vzdáleného od aktuální posice kalendáře, bude snazší datum vyťukat. Pro dny blízké aktuálnímu se zase nabízí mít zrychlené volby jako zítra, za X dní, za týden a podobně.

  2. Kopírování data do pole ze schránky je další věc, co je hezké, když funguje.

  3. S předchozími body souvisí tolerance k různým zápisům.

    To je sice občas problém a neřešitelný rébus.

    • Je „14-2-13“ 14. únor 2013, nebo 13. únor 2014?
    • Je „10/2/2014“ 10. únor 2014, nebo 2. říjen 2014?

    Akceptovat ale zápisy „5. 10. 2014“, „05.10.2014“ i typograficky chybný „5.10.2014“ by měla být povinnost.

  4. Diskutabilní je tvar data, který si prohlížeč řídí po svém. To je na jednu stranu výhoda. Formát data se teoreticky může přizpůsobovat prostředí uživatele. Na druhou stranu není možné dosáhnout tvaru „D. M. YYYY“, který se obvykle používá v českém prostředí. Takovou hodnotu value prohlížeč nepřechroupe.

    Fixní tvar kalendářního data

Mobilní zařízení

Výše uvedené platí spíš pro desktopové prohlížeče. U mobilů může zvláštní typ <input>u přinášet jisté benefity.

Nativní kalendář typicky bude lépe ovladatelný prsty. Teoreticky by systémový kalendář mohl i zobrazovat uložené události.

Hotové řešení

Výběr data prostřednictvím kalendáře

Sice ne úplně ideální, ale celkem dobře funkční a závislostí na jQuery netrpící je Rome (demo).

Samostatná zjednodušená ukázka

Odkazy jinam