Siirry pääsisältöönSiirry sivunavigaatioon

Date input (Päivämääräkenttä)

Päivämääräkenttä on komponentti, johon käyttäjä voi syöttää päivämäärätiedon valitsemalla sen kalenterista tai kirjoittamalla päivämäärän syöttökenttään. Päivämääräkenttä ohjaa käyttäjää syöttämään päivämäärän oikeassa muodossa muoto-ohjeen ja kalenterin avulla.

Kirjoita muodossa PP.KK.VVVV. Ajastettu sisältö julkaistaan julkaisupäivänä.

Saavutettavuus ja käytettävyys

  • Päivämääräkentän kanssa tulee käyttää otsaketta (label), joka kuvaa päivämääräkentän tarkoituksen. Otsake on osa päivämääräkomponenttia.
  • Käyttäjälle tulee esittää ohje päivämäärän muodosta. Ohjeen tulee olla aina näkyvissä joko ohjetekstissä tai otsakkeessa. Suositeltu paikka päivämäärän muoto-ohjeelle on komponentin ohjeteksti.
  • Muoto-ohjetta ei tule ilmoittaa ainoastaan päivämääräkentän placeholder-attribuutissa, koska tieto katoaa näkyvistä käyttäjän kirjoittaessa kenttään.
  • Kalenteria voi käyttää päivän valitsemiseen näppäimistön avulla. Focuksen siirtyminen pois kalenterin sisältä on estetty kalenterin ollessa auki.

Mistä komponentti koostuu

Päivämääräkenttä koostuu otsakkeesta, tekstin syöttökentästä, sekä valinnaisesta kalenteristapainikkeesta. Päivämääräkenttään voidaan lisäksi antaa ohjeteksti, joka näkyy otsakkeen ja syöttökentän välissä. Päivämäärän muoto-ohje on suositeltava antaa ohjetekstinä.

Lomakkeessa olevat kentät ovat oletusarvoisesti pakollisia, ja valinnaiset kentät ilmoitetaan valinnaisuustekstillä. Valinnaisuusteksti näytetään suluissa otsakkeen lopussa. Päivämääräkentälle voidaan lisäksi antaa tila ja tilateksi, jotka ilmaisevat hyväksyttyä tai virheellistä tilaa.

Kalenteripainike avaa dialogin, josta käyttäjä voi valita päivämäärän kalenterinäkymässä.

Koko ja käyttö

Käyttäjälle tulee aina antaa mahdollisuus kirjoittaa päivämäärä suoraan tekstin syöttökenttään. Päivämäärän valinta kalenterinäkymästä on käyttäjälle valinnainen toiminto. Selkeissä päivämäärävalinnoissa, kuten syntymäpäivässä, on hyvä käyttää pelkkää syöttökenttää. Kalenteri helpottaa päivämäärän valintaa silloin, kun halutaan nähdä päivämäärä suhteessa viikonpäiviin.

Päivämääräkenttää ei tule käyttää yksittäisen kuukausi-, vuosi- tai kellonaikatiedon valitsemiseen. Näissä tapauksissa voidaan käyttää päivämääräkentän sijaan esimerkiksi alasvetovalikkoa.

Päivämääräkenttä sisältää kalenterista versiot työpöytäkäyttöön ja mobiilikäyttöön. Oletusarvoisesti käytössä on työpöytäversio, joka avaa kalenterin joko syöttökentän ala- ta yläpuolelle käytettävissä olevan tilan mukaan. Mobiilikäyttöön tarkoitettu versio avaa kalenterin selaimen alalaitaan.

Kalenterinäkymä tukee erilaisia näppäimistön pikakomentoja kuukausien ja vuosien välillä liikkumiseen. Lisäksi kalenterin mobiiliversio tukee pyyhkäisyeleitä edelliseen ja seuraavaan kuukauteen siirtymiseen.

  • Siirry päivien välillä käyttämällä nuolinäppäimiä
  • Siirry viikon alkuun painikkeella Home ja viikon loppuun painikkeella End
  • Siirry kuukausi taaksepäin painikkeella PageUp ja kuukausi eteenpäin painikkeella PageDown
  • Siirry edelliseen vuoteen painikkeilla Shift + PageUp ja seuraavaan vuoteen painikkeilla Shift + PageDown

Kalenterin mobiiliversio

Kirjoita muodossa PP.KK.VVVV. Ajastettu sisältö julkaistaan julkaisupäivänä.

Virheellinen päivämääräkenttä

Kirjoita muodossa PP.KK.VVVV. Ajastettu sisältö julkaistaan julkaisupäivänä.
Vaadittu tieto

Valinnainen päivämääräkenttä

Kirjoita muodossa PP.KK.VVVV. Ajastettu sisältö julkaistaan julkaisupäivänä.