Aksel

Meny

DatePicker

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Intro

DatePicker lar bruker velge en eller flere tilgjengelige dager, samt perioder. Basert på hvordan du ønsker bruker skal kunne velge dato, kan man bruke medhørende inputfelt eller statisk kalender.

Egnet til:

  • Velge en eller flere dager.
  • Velge en periode.
  • Når det er begrensninger i hvilke dager som kan velges.
  • Når bruker ikke kan forventes å huske eksakt dato.

Uegnet til:

  • Valg av datoer som strekker seg over lengre tid.
  • Valg av datoer langt tilbake eller frem i tid.
  • Valg av kjente datoer, f.eks. fødselsdato.

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

Mode

DatePicker kommer med 3 forskjellige metoder for å innhente datoer.

  • Single: Lar bruker velge 1 dag.
  • Multiple: Lar bruker velge 1 eller flere dager. Bruk min/max-props for å sette begrensninger her.
  • Range: Lar bruker velge en periode fra-til.

Read-only

Readonly-attributtet spesifiserer at et inputfelt i et skjema er skrivebeskyttet. Et skrivebeskyttet felt kan ikke endres, men brukere kan tabbe til det, markere det og kopiere teksten fra det. Til forskjell fra disabled-felter vil innholdet i readonly-felter inkluderes når et skjema sendes inn.

Retningslinjer

Ved valg av datoer langt frem eller tilbake i tid, burde man bruke dropdownCaption-prop med fromDate/toDate. Det lar bruker raskere finne fram til den datoen de ønsker.

GjørMonthPicker uten select-meny
UnngåMonthpicker med select-meny

Vurder om Datepicker er den rette løsningen for deg

Datepicker lar bruker lett lete seg frem til datoer innenfor en tidsramme, men støter på problemer når tidsrommet den skal dekke trekker seg over lengre perioder. Valg av år lengre frem/tilbake i tid må gjøres via en select, noe som skaper problemer når man ender opp med 50+ valg.

Datepicker er et komplekst mønster og ofte vil det letteste for bruker være å manuelt skrive inn en dato i et TextField. Gov.uk har gjort en del research på valg av dato og velger selv å bare tilby et input uten interaktiv datovelger.

Lenker

Bruk av fromDate/toDate

Når bruker åpner Datepicker vil alltid default vist måned være den samme som today (new Date()/prop). Hvis denne måneden faller utenfor fromDate/toDate-range vil det første bruker se bare være ikke valgbare datoer. Basert på hvilken informasjon man ønsker må man selv sette defaultMonth-prop til der det gir mest mening for bruker.

Returformat

Komponenten returnerer datoer i Date-format. Du må selv ta deg av konvertering til ønsket format og da ev. tidssoner ved bruk av f.eks. ISO-format. I selve komponenten bruker vi data-fns for parsing.

Tilgjengelighet

For best mulig tilgjengelighet anbefaler vi å ta i bruk DatePicker.Input sammen med useDatepicker eller useDateRange-hook.

Props

DatePicker

children?

  • Type:
    ReactNode
  • Description:

className?

  • Type:
    string
  • Description:

wrapperClassName?

  • Type:
    string
  • Description:

translations?

  • Type:
    RecursivePartial<{ chooseDate: string; chooseDates: string; chooseDateRange: string; chooseMonth: string; week: string; weekNumber: string; selectWeekNumber: string; month: string; goToNextMonth: string; ... 7 more ...; closeMonthPicker: string; }>
  • Description:

fromDate?

  • Type:
    Date
  • Description:

toDate?

  • Type:
    Date
  • Description:

dropdownCaption?

  • Type:
    boolean
  • Default:
    false
  • Description:

disabled?

  • Type:
    Matcher[]
  • Description:

disableWeekends?

  • Type:
    boolean
  • Default:
    false
  • Description:

showWeekNumber?

  • Type:
    boolean
  • Default:
    false
  • Description:

open?

  • Type:
    boolean
  • Description:

onClose?

  • Type:
    (() => void)
  • Description:

onOpenToggle?

  • Type:
    (() => void)
  • Description:

strategy?

  • Type:
    "absolute" | "fixed"
  • Default:
    See Popover
  • Description:

month?

  • Type:
    Date
  • Description:

onMonthChange?

  • Type:
    MonthChangeEventHandler
  • Description:

today?

  • Type:
    Date
  • Description:

onDayClick?

  • Type:
    DayEventHandler<MouseEvent<Element, MouseEvent>>
  • Description:

defaultMonth?

  • Type:
    Date
  • Description:

mode?

  • Type:
    "multiple" | "single" | "range"

onSelect?

  • Type:
    ((val?: Date) => void) | ((val?: Date[]) => void) | ((val?: DateRange | undefined) => void) | undefined

selected?

  • Type:
    Date | Date[] | DateRange

defaultSelected?

  • Type:
    Date | Date[] | DateRange

onWeekNumberClick?

  • Type:
    ((week: number, days: Date[]) => void)
  • Description:
    ParamDescription
    weekCurrent week number
    daysDates in the week

min?

  • Type:
    number

max?

  • Type:
    number

locale?

  • Deprecated:
    Use `<Provider />`-component
  • Type:
    "nb" | "nn" | "en"
  • Default:
    "nb" (norsk bokmål)
  • Description:

DatePicker.Input

label

  • Type:
    ReactNode
  • Description:

hideLabel?

  • Type:
    boolean
  • Default:
    false
  • Description:

size?

  • Type:
    "medium" | "small"
  • Default:
    "medium"
  • Description:

error?

  • Type:
    ReactNode
  • Description:

errorId?

  • Type:
    string
  • Description:

disabled?

  • Type:
    boolean
  • Description:

description?

  • Type:
    ReactNode
  • Description:

id?

  • Type:
    string
  • Description:

readOnly?

  • Type:
    boolean
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLInputElement>
  • Description:

useDatepicker

defaultSelected?

  • Type:
    Date
  • Description:

defaultMonth?

  • Type:
    Date
  • Description:

required?

  • Type:
    boolean
  • Description:

onDateChange?

  • Type:
    ((val?: Date) => void)
  • Description:

inputFormat?

  • Type:
    string
  • Default:
    "dd.MM.yyyy"
  • Description:

onValidate?

  • Type:
    ((val: DateValidationT) => void)
  • Description:

allowTwoDigitYear?

  • Type:
    boolean
  • Default:
    true
  • Description:

fromDate?

  • Type:
    Date
  • Description:

toDate?

  • Type:
    Date
  • Description:

today?

  • Type:
    Date
  • Description:

disabled?

  • Type:
    Matcher[]
  • Description:

disableWeekends?

  • Type:
    boolean
  • Default:
    false
  • Description:

locale?

  • Deprecated:
    Use `<Provider />`-component
  • Type:
    "nb" | "nn" | "en"
  • Default:
    "nb" (norsk bokmål)
  • Description:

useRangeDatepicker

defaultSelected?

  • Type:
    DateRange
  • Description:

onRangeChange?

  • Type:
    ((val?: DateRange) => void)
  • Description:

onValidate?

  • Type:
    ((val: RangeValidationT) => void)
  • Description:

fromDate?

  • Type:
    Date
  • Description:

toDate?

  • Type:
    Date
  • Description:

today?

  • Type:
    Date
  • Description:

disabled?

  • Type:
    Matcher[]
  • Description:

disableWeekends?

  • Type:
    boolean
  • Default:
    false
  • Description:

defaultMonth?

  • Type:
    Date
  • Description:

required?

  • Type:
    boolean
  • Description:

inputFormat?

  • Type:
    string
  • Default:
    "dd.MM.yyyy"
  • Description:

allowTwoDigitYear?

  • Type:
    boolean
  • Default:
    true
  • Description:

locale?

  • Deprecated:
    Use `<Provider />`-component
  • Type:
    "nb" | "nn" | "en"
  • Default:
    "nb" (norsk bokmål)
  • Description:

Tokens

TokenFallback
--ac-date-middle-text--a-text-on-action
--ac-date-middle-bg--a-surface-action-selected
--ac-date-week-text--a-text-on-neutral
--ac-date-week-bg--a-surface-neutral
--ac-date-selected-text--a-text-on-action
--ac-date-selected-bg--a-surface-action-selected
--ac-date-disabled-bg--a-surface-neutral-subtle
--ac-date-disabled-text--a-text-subtle
--ac-date-hover-bg--a-surface-action-subtle-hover
--ac-date-today-border--a-border-action-selected
--ac-date-caption-text--a-text-default
--ac-date-input-error-border--a-border-danger
--ac-date-input-button-text--a-text-default
--ac-date-input-button-hover-text--a-text-action-on-action-subtle
--ac-date-input-button-hover-bg--a-surface-action-subtle-hover
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

Relaterte komponenter