Tässä oppaassa näytän sinulle, miten voit toteuttaa päivämäärä- ja aikasyötteitä verkkolomakkeissasi. Selitän eri syöttötyypit, jotka ovat käytettävissäsi, ja annan arvokkaita vinkkejä käytännön sovelluksiin. Käsittelemme sekä päivämäärän että ajan syöttämistä, jotta saat vankat perusteet näiden toimintojen toteuttamiseen.
Tärkeimmät havainnot
- Syöttötyyppi date mahdollistaa vain päivämäärän valinnan.
- Syöttötyyppi dateTime-local yhdistää päivämäärän ja kellonajan ilman aikavyöhykkeen säätöä.
- Päivämäärän ja ajan muotoilu tapahtuu standardoidusti ISO 8601 -standardin mukaan.
- Selaimilla voi olla erilaisia tapoja esittää Päivämäärä- ja Aika-syötteet.
Päivämäärän ja ajan syötön perusteet
Jotta voit toteuttaa päivämäärä- ja aikasyötteitä lomakkeissasi, tarvitset HTML: n syöttötyyppien date, dateTime-local ja time. päiväys-syöttötyyppi mahdollistaa käyttäjän valita päivämäärän, kun taas dateTime-local -tyyppi tallentaa sekä päivämäärän että kellonajan. Viimeksi mainittu lähetetään ilman aikavyöhykesäätöä, mikä tarkoittaa, että syöte siirretään palvelimelle sellaisenaan, kuin käyttäjä sen tekee.
Nyt tutustumme näihin tyyppeihin yksityiskohtaisemmin.
Käyttö syöttötyypillä date
Jos haluat pyytää vain päivämäärää, voit käyttää tyyppiä date. Tämä mahdollistaa käyttäjän valita päivämäärän sisäänrakennetun kalenterityökalun avulla, mikä parantaa käyttäjäystävällisyyttä.
Kun avaat kalenterityökalun, voit valita erilaisia päivämääriä ja lähettää ne napsauttamalla "Lähetä". Päivämäärä siirretään standardoidussa muodossa: Vuosi-Kuukausi-Päivä.
On tärkeää huomata, että kalenterin esitystapa voi vaihdella selaimen mukaan. Käyttöjärjestelmäsi alueelliset asetukset vaikuttavat siihen, millä tavoin päivämäärä näytetään.
Päivämäärän ja ajan syöttö tyypillä dateTime-local
Jos haluat tallentaa sekä päivämäärän että kellonajan, sinun tulisi käyttää tyyppiä dateTime-local. Tämä toimii samoin kuin päivämäärän kyselyssä, mutta voit lisäksi antaa kellonajan.
Voit valita sekä päivän että kellonajan. Yllättävää kyllä, aika näkyy 24 tunnin muodossa, jos alueellisissa asetuksissasi ei ole käytössä AM/PM-muotoa.
Kun lähetät lomakkeen, saat tiedot myös ISO-muodossa, ja aika pysyy muuttumattomana ilman muuntamista toiseen aikavyöhykkeeseen.
Käyttö tyypillä time
Aikasyöttötyyppi yksinään mahdollistaa vain kellonajan ilman päivämäärää. Tämän tyyppisen avulla voit valita ajan, joka lähetetään myös 24 tunnin muodossa.
Muiden päivämäärämuotojen käyttöönotto
Edellä mainittujen tyyppien lisäksi voit toteuttaa myös Viikkojen (week) ja Kuukausien (month) syöttöjen käytön. Viikon formaatin avulla voit määritellä tiettyjä viikkoja ja helposti valita haluamasi viikon.
Kuukausi-formaatin osalta vastaavaa. Täällä voit valita vain kuukauden ilman specificiteettiä päivistä.
Oletusarvot ja arvot
Toinen hyödyllinen vinkki on mahdollisuus asettaa oletuksena olevat arvot syöttökenttiisi. Näin voit esimerkiksi määrittää, että päivämäärän valinnassa ja kellonajan valinnassa on jo valmiiksi määritetty tietty päivämäärä.
Aikavyöhykkeet ja selainyhteensopivuus
Keskittävä asia päivämäärien ja aikojen käytössä on aikavyöhyke. Syötetyt tiedot tallennetaan paikallisessa muodossa. Aikavyöhykkeen säätöjä ei tarvitse tehdä, joten voit välittää paikallisen ajan suoraan.
On kuitenkin tärkeää huomata, että näiden syöttölajien tuki voi vaihdella selaimittain. Vaikka date ja dateTime-local ovat lähes kaikkien yleisten selainten tukemia, on suositeltavaa tarkistaa, toimivatko tietyn kohderyhmäsi selaimissa myös "Can I use" -sivustolla.
Yhteenveto
Olet nyt saanut yleiskuvan päivämäärien ja aikojen syöttämisestä verkkosivujesi lomakkeisiin. Tunnet eri syöttötyypit, niiden muodot ja käyttäjäasetusten merkityksen. Muista, että oikea muotoilu ja selain tuki ovat tärkeitä saumattoman käyttäjäkokemuksen luomiseksi.
Usein kysytyt kysymykset
Mikä on ero date ja dateTime-local välillä?date mahdollistaa vain päivämäärän valinnan, kun taas dateTime-local mahdollistaa sekä päivämäärän että kellonajan valinnan.
Miten aikavyöhykettä käsitellään dateTime-localissa?Aika välitetään sellaisenaan kuin se on paikallisesti syötetty, ilman muutoksia aikavyöhykkeeseen.
Mitä selaimia tukevat nämä syöttölajit?Useimmat yleiset selaimet tukevat dateä ja dateTime-localia; tiettyihin toimintoihin voi käyttää apuna "Can I use" -sivustoa.
Voinko asettaa oletusarvoja päivämääräkentille?Kyllä, voit asettaa oletusarvot syöttökentille value-attribuutin avulla.
Mitä muotoja käytetään tiedon välittämiseen?Tiedot välitetään ISO-formaatissa (Vuosi-Kuukausi-Päivä päivämäärässä, Vuosi-Kuukausi-Päivä T Tunni:Minuutti:Sekuntti päivämäärässä ja ajassa).
