Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

DatePicker

Oppdatert 18. august 2023Stabil
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

    Uegnet til:

    • Valg av datoer som strekker seg over lengre tid
    • Valg av datoer langt tilbake eller frem i tid

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    Vi anbefaler å bruke useDatepicker-hook hvis man har et input-felt

    Før du belger å bruke range, vurder om to enkelte datepickere for start/slutt-dato ville vært bedre. Range fungerer bedre for korte perioder innenfor en månede.

    Bruk onValidate-callback for å håndtere validering.

    Prop allowTwoDigitYear legger til støtte for 'yy'-format. Tilgjengelig year-range vil være fra 1943-2042 (2023).

    Varianter

    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 til-fra.

    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 som dekker perioder over flere år, burde man bruke `dropdownCaption`-prop med fromDate/toDate. Det lar bruker lettere finne den tidsperioden de ønsker å velge fra uten å måtte klikke seg frem til dem.

    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 endre 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.

    NyheterRelevante lenker

    • Dates - GOV.UK
    • Utforskning fødselsdato-valg

    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.

    Date

    Komponenten returnerer datoer i Date-format. Du må selv ta deg av konvertering til ønsket format og da evt tidssoner ved bruk av 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? ReactNode
    Element datepicker anchors to. Use <DatePicker.Input /> for built-in toggle, or make your own with the open/onClose props
    className? string
    Classname for datepicker in popover
    wrapperClassName? string
    Classname for wrapper
    locale?"nb" | "nn" | "en"
    Changes datepicker locale
    fromDate? Date
    The earliest day to start navigation.
    toDate? Date
    The latests day to end navigation.
    dropdownCaption?boolean
    Display dropdown for choosing the month and the year. Needs `fromDate` + `toDate` to work.
    disabled? Matcher[]
    Apply the disabled modifier to the matching days. https://react-day-picker.js.org/api/types/Matcher
    disableWeekends?boolean
    Disable saturday and sunday.
    showWeekNumber?boolean
    Shows week numbers in left-column. Use with caution, takes up valuable screenspace for small screens.
    open? boolean
    Open state for user-controlled state. Component controlled by default
    onClose? (() => void)
    onClose callback for user-controlled state
    onOpenToggle? (() => void)
    onOpenToggle callback for user-controlled state. Only called if `<DatePicker.Input />` is used
    strategy?"absolute" | "fixed"
    Avoid using if possible! Changes what CSS position property to use. You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
    bubbleEscape?boolean
    Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
    mode? "single" | "multiple" | "range"
    onSelect? ((val?: Date) => void) | ((val?: Date[]) => void) | ((val?: DateRange | undefined) => void) | undefined
    selected? Date | Date[] | DateRange
    defaultSelected? Date | Date[] | DateRange
    min? number
    max? number

    DatePicker.Input

    label ReactNode
    Input label
    hideLabel?boolean
    Shows label and description for screenreaders-only
    size?"medium" | "small"
    Changes padding and font-sizes
    error? ReactNode
    Error message for element
    errorId? string
    Override internal errorId
    disabled? boolean
    Disables element @note Avoid using if possible for accessibility purposes
    description? ReactNode
    Adds a description to extend labling of a field
    id? string
    Override internal id
    readOnly? boolean
    Read only-state
    className? string
    ref? Ref<HTMLInputElement>
    Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    DatePicker.Input extends HTMLInputElement

    useDatepicker

    defaultSelected? Date
    The initially selected Date
    defaultMonth? Date
    Default shown month
    required? boolean
    Make selection of Date required
    onDateChange? ((val?: Date) => void)
    Callback for changed state
    inputFormat?string
    Input-format
    onValidate? ((val: DateValidationT) => void)
    validation-callback
    allowTwoDigitYear?boolean
    Allows input of with 'yy' year format. @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th. In 2023 this equals to 1943 - 2042
    openOnFocus?boolean
    Opens datepicker on input-focus
    locale?"nb" | "nn" | "en"
    Changes datepicker locale
    fromDate? Date
    The earliest day to start navigation.
    toDate? Date
    The latests day to end navigation.
    disabled? Matcher[]
    Apply the disabled modifier to the matching days. https://react-day-picker.js.org/api/types/Matcher
    disableWeekends?boolean
    Disable saturday and sunday.

    useRangeDatepicker

    defaultSelected? DateRange
    The initially selected DateRange
    onRangeChange? ((val?: DateRange) => void)
    Callback for changed state
    onValidate? ((val: RangeValidationT) => void)
    validation-callback
    locale?"nb" | "nn" | "en"
    Changes datepicker locale
    fromDate? Date
    The earliest day to start navigation.
    toDate? Date
    The latests day to end navigation.
    disabled? Matcher[]
    Apply the disabled modifier to the matching days. https://react-day-picker.js.org/api/types/Matcher
    disableWeekends?boolean
    Disable saturday and sunday.
    defaultMonth? Date
    Default shown month
    required? boolean
    Make selection of Date required
    inputFormat?string
    Input-format
    allowTwoDigitYear?boolean
    Allows input of with 'yy' year format. @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th. In 2023 this equals to 1943 - 2042
    openOnFocus?boolean
    Opens datepicker on input-focus

    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

    Relaterte komponenter

    • TextField thumbnail
      TextField

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack