Time picker

Time picker (tidsvelger) lar brukeren velge et klokkeslett. Brukeren kan enten skrive timer og minutter direkte i feltene, eller velge fra en nedtrekksmeny med tilgjengelige klokkeslett.

Time picker passer godt i skjemaer der klokkeslettet har betydning, for eksempel ved valg av mĂžtetidspunkt, Ă„pningstider eller starttidspunkt for en aktivitet.

Test komponenten

Relaterte komponenter

Varianter

Time picker finnes i tre varianter. Alle stĂžtter de samme etikett-, hjelpetekst- og feilmeldingsfunksjonene.

Variant Beskrivelse
Standard Tekstfelt for timer og minutter med en klokke-knapp som Ă„pner en rullegardinmeny
Skjul velger (hide-picker) Bare tekstfeltene vises, uten klokke-knappen
Steg-piler (step-arrows) Pil-knapper pÄ hver side lar brukeren bla frem og tilbake i tid
Eksempler pÄ layout-variantene av timepickerEksempler pÄ layout-variantene av timepickerEksempler pÄ layout-variantene av timepicker

StĂžrrelser

Time picker kan brukes i tre ulike stĂžrrelser:

StĂžrrelser Bruk
Medium (default) Standard, og skal brukes som hovedregel
Small For trange flater, som tabeller og kompakte skjema
XSmall For ekstra trange flater, som kompakte tabeller og informasjonstette fagsystemer
Eksempel pÄ time picker i forskjellige stÞrrelser

Retningslinjer for bruk

Bruk time picker nÄr

  • brukeren skal oppgi et klokkeslett som en del av et skjema
  • klokkeslettet har betydning for videre steg i prosessen
  • du vil tilby bĂ„de fritekstinput og visuell velger
  • brukeren trenger Ă„ velge innenfor et begrenset tidsrom (med min/maks)

UnngÄ time picker nÄr

  • brukeren kun trenger Ă„ velge mellom noen fĂ„ faste tidspunkter – da kan select eller radiobutton egne seg bedre
  • klokkeslettet ikke er av betydning for oppgaven

Bruk label og hjelpetekst for Ă„ forklare forventningen

Label og hjelpetekst bĂžr beskrive hva brukeren skal gjĂžre og hvilke begrensninger som gjelder, for eksempel tidsrom eller steglengde.

GjĂžr slik

Bruk en forklarende label og hjelpetekst som hjelper brukeren Ă„ fylle inn riktig tidspunkt

UnngÄ

UnngÄ uklare etiketter som «Tid» uten Ä forklare hva som forventes eller hvilke regler som gjelder

Universell utforming

Label skal alltid vĂŠre synlig

Alle skjemaelementer mÄ ha en synlig label. Den skal beskrive hva brukeren skal gjÞre, for eksempel «Velg mÞtetidspunkt».

Dersom etiketten skjules visuelt, skal den likevel vĂŠre tilgjengelig for skjermlesere.

Klokkeslett mÄ kunne velges med tastatur

Time picker skal fungere uten mus. Brukeren skal kunne:

  • Flytte mellom timer- og minutter-feltet med piltaster og Tab
  • Endre verdi med piltastene opp/ned i hvert felt
  • Åpne nedtrekksmenyen med klokke-knappen og navigere med piltaster
  • Velge et klokkeslett med Enter
  • Lukke nedtrekksmenyen med Esc

Skjermlesere kunngjĂžr klokkeslett og label

Timer- og minutter-feltene har role="spinbutton" og aria-label som inkluderer komponentens etikett. Dette sikrer at skjermleseren kunngjĂžr for eksempel «15, Timer, MĂžtetidspunkt» – tilsvarende opplesing som native <input type="time">.

Feil knyttes til feltet

Feilmeldinger mÄ knyttes til inputfeltet med aria-describedby. Bruk komponentens errorMessage-prop og hasError-tilstand for Ä sikre at feilen leses opp korrekt.

Les mer om universell utforming av time picker:

Anatomi

Element Beskrivelse
1. Etikett (label) Tekst som forteller hva brukeren skal gjĂžre
2. Hjelpetekst Tilleggsinformasjon, for eksempel tillatt tidsrom (valgfritt)
3. Inputfelt Feltet der brukeren kan skrive inn tidspunkt manuelt, eller hvor valgt klokkeslett vises
4. Klokkeknapp Åpner tidsvelgeren
5. Tidsvelger Nedtrekksmeny med kolonner for timer og minutter
6. Valgt time/minutt Tidspunktet brukeren har valgt, markert i tidsvelgeren og vist i inputfeltet
Timepicker anatomi.

Implementasjon i kode

Hvordan ta komponenten i bruk?

Bruk i skjema

Time picker fungerer som et vanlig skjemafelt og sender verdien i formatet HH:MM ved innsending.

<pkt-timepicker
  label="MĂžtetidspunkt"
  id="meeting-time"
  name="meeting-time"
  required
></pkt-timepicker>

Begrensninger med min, maks og step

Bruk min og max for Ä begrense hvilke klokkeslett brukeren kan velge. step angir steglengde i sekunder og mÄ gÄ opp i et helt antall minutter (f.eks. 300 for 5-minutters intervaller).

<pkt-timepicker
  label="Arbeidstid"
  id="work-time"
  name="work-time"
  min="08:00"
  max="16:00"
  step="300"
></pkt-timepicker>

HendelseshÄndtering

Time picker sender ut en change-hendelse nÄr brukeren har valgt et tidspunkt. Verdien er tilgjengelig via e.target.value som en streng i formatet HH:MM.

For React brukes onChange-propen direkte. En value-change-hendelse (onValueChange i React) er ogsÄ tilgjengelig med event.detail som inneholder valgt tid.

Testing

Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig fĂžr du tester den. Dette kan gjĂžres ved Ă„ kjĂžre denne kodelinjen fĂžr testene kjĂžres: 

await window.customElements.whenDefined("pkt-timepicker");

Egenskaper

PktTimepicker

Props

Prop:
id
Type:
string
Beskrivelse:
Unik identifikasjon for tidsvelgeren
Prop:
name
Type:
string
Beskrivelse:
Navn som brukes i skjema ved innsending
Prop:
value?
Type:
string
Beskrivelse:
NĂ„vĂŠrende verdi i formatet HH:MM
Prop:
min?
Type:
string
Beskrivelse:
Tidligste tillatte verdi i formatet HH:MM
Prop:
max?
Type:
string
Beskrivelse:
Seneste tillatte verdi i formatet HH:MM
Prop:
step?
Type:
number
Standardverdi:
60
Beskrivelse:
Steglengde i sekunder. MÄ gÄ opp i et helt antall minutter eller timer. Standard er 60 (1 minutt).
Prop:
disabled?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Indikerer at tidsvelgeren er deaktivert
Prop:
required?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Indikerer at feltet mÄ fylles ut
Prop:
hidePicker?
hide-picker?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Skjuler klokke-knappen og viser kun tekstfeltene for timer og minutter
Prop:
stepArrows?
step-arrows?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Bruker steg-piler (forrige/neste) pÄ hver side av feltene istedenfor en klokke-knapp som Äpner en dropdown
Prop:
inputSize?
input-size?
Type:
"medium" | "small" | "xsmall"
Standardverdi:
"medium"
Beskrivelse:
StĂžrrelse for felt, ikoner og input-wrapper.
Prop:
label
Type:
string
Beskrivelse:
Tekst som vises over feltet
Prop:
helptext?
Type:
string
Beskrivelse:
Hjelpetekst som vises over feltet
Prop:
helptextDropdown?
Type:
string
Beskrivelse:
Hjelpetekst som vises i en lukket boks man kan Ă„pne
Prop:
helptextDropdownButton?
Type:
string
Standardverdi:
"Les mer"
Beskrivelse:
Knappetekst for utvidet hjelpetekst
Prop:
hasError?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Indikerer at feltet har en feil
Prop:
errorMessage?
Type:
string
Beskrivelse:
Feilmelding som vises under feltet ved feiltilstand
Prop:
requiredTag?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Viser en merking som indikerer at feltet er pÄkrevd
Prop:
requiredText?
Type:
string
Standardverdi:
"MĂ„ fylles ut"
Beskrivelse:
Tekst som vises i pÄkrevd-merkingen
Prop:
optionalTag?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Viser en merking som indikerer at feltet er valgfritt
Prop:
optionalText?
Type:
string
Standardverdi:
"Valgfritt"
Beskrivelse:
Tekst som vises i valgfritt-merkingen
Prop:
tagText?
Type:
string
Beskrivelse:
Tekst som vises i en tag ved siden av label
Prop:
inline?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Indikerer at feltet skal flyte sammen med sidens innhold
Prop:
useWrapper?
Type:
boolean
Standardverdi:
true
Beskrivelse:
Indikerer at feltet skal ha synlig label og hjelpetekst
Prop:
ariaDescribedby?
aria-describedby?
Type:
string
Beskrivelse:
Spesifiserer ID-en til elementet som beskriver feltet

Events

Event:
change
Type:
Event
Beskrivelse:
Returnerer valgt tid som streng i formatet HH:MM via e.target.value
Event:
value-change
Type:
CustomEvent
Beskrivelse:
Returnerer valgt tid som streng i formatet HH:MM i event.detail
Event:
toggleHelpText
Type:
CustomEvent
Beskrivelse:
Returnerer event.detail { isOpen: true } eller event.detail { isOpen: false } nÄr hjelpeteksten Äpnes eller lukkes
Event:
onChange
Type:
Event
Beskrivelse:
UtlÞses nÄr en tid velges. e.target.value inneholder valgt tid i formatet HH:MM.