Datepicker

BeskrivelseKodeUniversell utforming

Om komponenten

Datepicker (Datovelger) lar brukere velge en dato fra en kalender eller skrive inn en dato i et inputfelt. Den brukes til å velge en spesifikk tilgjengelig dato eller en periode. Ledeteksten beskriver hvilken dato brukeren skal legge inn. I datepicker kan du markere flere datoer for å velge en periode.

Varianter

Datepicker-komponenten har flere varianter basert på kompleksitet og funksjonalitet. Noen av variantene inkluderer:

  1. Enkel Datepicker: Tillater brukeren å velge en enkelt dato fra en kalender.
  2. Flere datoer: Lar brukeren velge flere datoer samtidig.
  3. Periode: Tillater brukeren å velge et tidsintervall ved å velge start- og sluttdatoer.

Farger

Inputfeltet skal alltid ha fargen $brand-blue (#2A2859) på kanter. Markerte perioder skal være i fargen $blue-1000 (#6FE9FF), surface-strong-blue.

Tekstfarge er $dark-blue-1000 (#2A2859), text-body-default.

Slik bruker du komponenten

Bruk datovelger når du vil be om en spesifikk dato eller en periode. Datoen kan skrives inn eller velges fra en kalender.

  • NÃ¥r du skal velge en eller flere dager.
  • NÃ¥r du skal velge en periode.
  • NÃ¥r det er begrensninger i hvilke dager som kan velges.

Anatomi

  1. Label
  2. Hjelpetekst
  3. Inputfelt
  4. Måned og år
  5. Frem og tilbake knapper
  6. Ukedager
  7. Dager
  8. Dagens dato
  9. Valgt dato