Beta
TimeInput
Komponentti kellonajan syöttämiseen ja valintaan.
Julkaistu versiossa 13.3.0
Esikatselu
Käyttötarkoitus
Komponenttia käytetään kellonajan valitsemiseen. Komponentti ohjaa käyttäjää syöttämään kellonajan oikeassa muodossa.
Toteutus perustuu HTML:n natiiviin time-tyyppiseen input-kenttään(Avautuu uuteen välilehteen), joten sen rajoitukset tulee huomioida komponenttia käyttöönotettaessa.
Saavutettavuus
TextInput-komponentti tuottaa saavutettavan käyttöliittymäelementin huolehtien ohjetekstien liittämisestä kenttään automaattisesti. Näin ruudunlukijan käyttäjä saa tiedon kentän pakollisuudesta, sekä mahdollisista lisätiedoista.
| Näppäin | Toiminto |
|---|---|
| Nuoli vasemmalle | Siirtyy tuntien, minuuttien ja sekuntien välillä. |
| Nuoli oikealle | Siirtyy tuntien, minuuttien ja sekuntien välillä. |
| Nuoli ylös | Kasvattaa valitun osion arvoa. |
| Nuoli alas | Vähentää valitun osion arvoa. |
Esimerkit
Tilat
Kokovaihtoehdot
Pienin koko (xs) on tarkoitettu tiivistä asettelua vaativiin asiantuntijakäyttöliittymiin.
Kaksipalstainen asettelu
Kaksipalstaisessa asettelussa tulostetaan leftCol-propilla kentän nimilappu ja aputeksti Column-komponentin sisään.
Sekuntien näyttäminen
Syötteen validointi
Alla on esimerkki syötteen validoinnista komponentin tarjoamalla getTimeValidator-funktiolla.
Huomioitavaa selaintuessa
- Komponentti käyttää natiivia time-tyyppistä input-kenttää. Lue lisää: <input type="time">(Avautuu uuteen välilehteen)
- iOS-käyttöjärjestelmä ei tue sekuntien näyttämistä. Lue lisää: step(Avautuu uuteen välilehteen)