V tomto návode ti ukážem, ako môžeš implementovať dátumové a časové vstupy do svojich webových formulárov. Vysvetlím rôzne typy vstupov, ktoré máš k dispozícii, a poskytnem ti cenné tipy pre praktické použitie. Budeme sa zaoberať jednak vstupom dátumu a jednak vstupom času, aby si získal hlboké porozumenie pre implementáciu týchto funkcií.
Najdôležitejšie zistenia
- Typ vstupu date umožňuje výber iba jedného dátumu.
- Typ vstupu dateTime-local kombinuje dátum a čas bez úpravy časových pásiem.
- Formátovanie dátumov a časových údajov je štandardizované podľa ISO 8601.
- Pre dáta a časové vstupy môžu prehliadače mať rôzne vlastnosti zobrazenia.
Základy dátumového a časového vstupu
Na implementovanie dátumových a časových vstupov do svojich formulárov potrebuješ HTML vstupné typy date, dateTime-local a time. Vstupný typ date umožňuje používateľovi vybrať si dátum, zatiaľ čo typ dateTime-local zaznamenáva dátum aj čas. Tento druhý sa posiela bez úpravy časových pásiem, čo znamená, že záznam, ktorý používateľ urobí, sa odosiela na server v pôvodnom tvare.
Teraz si tieto typy pozrieme podrobnejšie.
Použitie vstupného typu date
Na získanie čistého dátumu môžeš použiť typ date. Tým umožňuješ používateľovi vyberať dátum pomocou vstavaného kalendára, čo zlepšuje použiteľnosť.
Po otvorení kalendára môžeš vybrať rôzne dátumy a tieto odoslať kliknutím na „Odoslať“. Dátum sa odosiela v štandardizovanom formáte: Rok-Mesiac-Deň.
Dôležité je vedieť, že zobrazenie kalendára sa môže líšiť podľa prehliadača. Zadefinované regionálne nastavenia tvojho operačného systému ovplyvňujú formát, v akom sa dátum zobrazuje.
Dátumové a časové vstupy s dateTime-local
Ak chceš zaznamenať nielen dátum, ale aj čas, mal by si použiť typ dateTime-local. Funguje podobne ako pri získavaní dátumu, lenže ti umožňuje zadať aj čas.
Môžeš zvoliť deň aj čas. Zaujímavé je, že čas sa zobrazuje vo formáte 24-hodín, ak nemáš v miestnych nastaveniach zapnutý formát využívajúci AM/PM.
Po odoslaní formulára dostaneš dáta tiež vo formáte ISO a čas zostane nezmenený, bez prepočítania do iného časového pásma.
Použitie time
Pomocou vstupného typu time môžeš zadať len čas bez dátumu. Týmto typom máš možnosť vybrať si čas, ktorý sa následne odosiela vo formáte 24-hodín.
Integrácia ďalších formátov dátumu
Okrem vyššie uvedených typov je možné realizovať aj vstup týždňa (week) a mesiaca (month). S pomocou formátu týždňa môžeš zadať konkrétny týždeň a jednoducho vybrať požadovaný týždeň.
Pre formát mesiaca platí podobné. Tu máš možnosť vybrať iba mesiac, bez definovania špecifických dní.
Prednastavenia a hodnoty
Ďalším užitočným tipom je možnosť nastavenia prednastavení pre tvoje vstupné polia. Napríklad môžeš stanoviť, že pri voľbe dátumu a času bude určitý dátum prednastavený.
Časové pásma a kompatibilita prehliadačov
Jedným z centrálnych aspektov pri používaní dátumov a časových údajov je časové pásmo. Vstupy sa ukladajú presne tak, ako sú zadané lokálne. V súvislosti s tým neexistuje žiadne automatické prispôsobenie časového pásma, takže môžete priamo odovzdať miestny čas.
Dôležité však je mať na pamäti, že podpora týchto typov vstupov sa môže líšiť v závislosti od prehliadača. Zatiaľ čo date a dateTime-local sú takmer podporované vo všetkých bežných prehliadačoch, odporúča sa skontrolovať na stránkach ako "Can I use", či špecifické funkcie fungujú aj vo vašej cieľovej skupine prehliadačov.
Zhrnutie
Máte teraz prehľad o implementácii dátumov a časových vstupov vo vašich webových formulároch. Poznáte rôzne typy vstupov, ich formáty a dôležitosť používateľských nastavení. Nezabudnite, že správne formátovanie a podpora prehliadačov sú kľúčové pre vytvorenie plynulého zážitku pre vašich používateľov.
