Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

MonthPicker

MonthPicker lar bruker velge en spesifikk måned. Basert på hvordan du ønsker bruker skal kunne velge måned, kan man bruke medhørende inputfelt eller statisk kalender.

StabilOppdatert 9. mai 2025
Github FigmaEndringslogg

Egnet til:

  • Velge en spesifikk måned

Eksempler

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

Datoer langt bak eller frem i tid

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

Gjør
Monthpicker med select-meny
Unngå
MonthPicker uten select-meny

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.

Bruk av fromDate/toDate

Ved bruk av disse, så vil alle måneder mellom de satte datoene være tilgjengelig. Det vil si at fromDate: 01-10-2022 vil gjøre alle måneder etter oktober 2022 tilgjengelig for valg.

Tilgjengelighet

For best mulig tilgjengelighet anbefaler vi å ta i bruk MonthPicker.Input sammen med useMonthpicker.

Props

MonthPicker

children?

  • Type:
    ReactNode
  • Description:

    Element monthpicker anchors to. Use <MonthPicker.Input /> for built-in toggle, or make your own with the open/onClose props

className?

  • Type:
    string
  • Description:

    Classname for datepicker in popover

wrapperClassName?

  • Type:
    string
  • Description:

    Classname for wrapper

fromDate?

  • Type:
    Date
  • Description:

    The earliest month to start navigation.

toDate?

  • Type:
    Date
  • Description:

    The latest day to end navigation.

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:

    i18n-API for customizing texts and labels.

    NB: If you need to change the language, use Provider instead.

dropdownCaption?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Display dropdown for choosing year. Needs fromDate + toDate to work.

disabled?

selected?

  • Type:
    Date
  • Description:

    Controlled selected-month

defaultSelected?

  • Type:
    Date
  • Description:

    Default selected month.

open?

  • Type:
    boolean
  • Description:

    Open state for user-controlled state. Component controlled by default

onClose?

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

    onClose callback for user-controlled state

onOpenToggle?

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

    onOpenToggle callback for user-controlled-state. Only called if <MonthPicker.Input /> is used

onMonthSelect?

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

    Callback for user-controlled state

year?

  • Type:
    Date
  • Description:

    Used to set visible year programmatically. Component controlled by default

onYearChange?

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

    Event fired when the user navigates between years.

strategy?

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

    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

data-color?

  • Type:
    (string & {}) | AkselColor

locale?

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

    Changes monthpicker locale

MonthPicker.Input

label

  • Type:
    ReactNode
  • Description:

    Input label

hideLabel?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Shows label and description for screen readers only

size?

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

    Changes padding and font-sizes

error?

  • Type:
    ReactNode
  • Description:

    Error message.

errorId?

  • Type:
    string
  • Description:

    Override internal errorId.

disabled?

  • Type:
    boolean
  • Description:

    Avoid using if possible for accessibility purposes.

    Disables element.

description?

  • Type:
    ReactNode
  • Description:

    Adds a description to extend the labeling.

id?

  • Type:
    string
  • Description:

    Override internal id.

readOnly?

  • Type:
    boolean
  • Description:

    Read-only state.

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLInputElement>
  • Description:

    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). React Docs

useMonthpicker

required?

  • Type:
    boolean
  • Description:

    Make Date-selection required

onMonthChange?

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

    Callback for month-change

inputFormat?

  • Type:
    string
  • Default:
    "MMMM yyyy"
  • Description:

    Input-format

onValidate?

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

    validation-callback

defaultYear?

  • Type:
    Date
  • Description:

    Default shown year

allowTwoDigitYear?

  • Type:
    boolean
  • Default:
    true
  • Description:

    Allows input of with yy year format.

    Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th. In 2024 this equals to 1944 - 2043

fromDate?

  • Type:
    Date
  • Description:

    The earliest month to start navigation.

toDate?

  • Type:
    Date
  • Description:

    The latest day to end navigation.

disabled?

defaultSelected?

  • Type:
    Date
  • Description:

    Default selected month.

locale?

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

    Changes monthpicker locale

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.

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