V tomto návodu vám ukážu, jak můžete implementovat vstupy pro datum a čas do svých webových formulářů. Vysvětlím různé typy vstupů, které máte k dispozici, a poskytnu vám cenné tipy k praktické aplikaci. Zabývat se budeme jak vstupem pro datum, tak pro čas, abyste získali fundované porozumění implementaci těchto funkcí.
Nejdůležitější poznatky
- Typ vstupu date umožňuje výběr pouze data.
- Typ vstupu dateTime-local kombinuje datum a čas bez úpravy časových pásem.
- Formátování dat a časů probíhá standardizovaně podle normy ISO 8601.
- Prohlížeče mohou mít různé zobrazení prvků pro vstup dat a času.
Základy vstupu pro datum a čas
Abyste mohli implementovat vstupy pro datum a čas ve svých formulářích, potřebujete HTML typy vstupu date, dateTime-local a time. Typ vstupu date umožňuje uživateli vybrat datum, zatímco typ dateTime-local zaznamenává jak datum, tak čas. Tento druhý typ je odesílán bez úpravy časových pásem, což znamená, že zadání, jak je učiněno uživatelem, je odesláno na server.
Nyní si podrobněji probereme tyto typy.
Použití typu vstupu date
Pro zjištění pouhého data můžete použít typ date. To umožňuje uživateli vybrat datum pomocí vestavěného kalendáře a zlepšuje tak uživatelskou přívětivost.
Po otevření kalendáře můžete vybrat různá data a odeslat je kliknutím na „Odeslat“. Datum je odesíláno v standardizovaném formátu: Rok-Měsíc-Den.
Je důležité vědět, že zobrazení kalendáře se může lišit v závislosti na prohlížeči. Regionální nastavení vašeho operačního systému ovlivňuje formát, v němž je datum zobrazeno.
Zaznamenávání dat a časů s dateTime-local
Pokud chcete zaznamenat jak datum, tak čas, měli byste použít typ dateTime-local. To funguje podobně jako dotaz na datum, s tím rozdílem, že můžete navíc zadat čas.
Zde můžete vybrat jak den, tak čas. Zajímavé je, že čas je zobrazen ve formátu 24 hodin, pokud není ve vašich místních nastaveních aktivován formát AM/PM.
Při odeslání formuláře jsou data také odeslána ve formátu ISO a čas zůstává zachován, aniž by byl převeden do jiného časového pásma.
Použití vstupu time
Jediný typ vstupu time vám umožňuje zadat pouze čas bez data. Tímto typem máte možnost vybrat čas, který je také odeslán ve formátu 24 hodin.
Zahrnutí dalších formátů data
Kromě výše uvedených typů je také možné realizovat vstup pro týden (week) a měsíc (month). S formátem week můžete zadávat konkrétní týdny a jednoduše vybrat požadovaný týden.
Pro formát month platí podobné. Zde máte možnost vybrat pouze měsíc, aniž byste určovali konkrétní dny.
Výchozí hodnoty a hodnoty
Další užitečnou radou je možnost nastavení výchozích hodnot pro vaše vstupní pole. Můžete například stanovit, že při výběru data a času je určité datum implicitně nastaveno.
Časová pásma a kompatibilita prohlížečů
Důležitým aspektem při používání dat a časových údajů je časové pásmo. Vstupy jsou ukládány tak, jak jsou zadány místně. V této souvislosti není žádná úprava časového pásma, takže můžeš předat místní čas přímo.
Důležité je však mít na paměti, že podpora těchto typů vstupů se může lišit v závislosti na prohlížeči. Zatímco datum a dateTime-local jsou téměř podporovány všemi běžnými prohlížeči, je doporučeno zkontrolovat na webových stránkách jako "Can I use", zda konkrétní funkce fungují v prohlížečích vaší cílové skupiny.
Shrnutí
Shrnutí poskytuje přehled o implementaci datových a časových vstupů do formulářů na vašich webových stránkách. Znáte různé typy vstupů, jejich formáty a důležitost uživatelských nastavení. Mějte na paměti, že správné formátování a podpora prohlížečů jsou klíčové pro vytvoření plynulého zážitku pro vaše uživatele.
