Aksel

Meny

MonthPicker

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Intro

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.

Egnet til:

  • Velge en spesifikk måned

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

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ørMonthpicker 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:

className?

  • Type:
    string
  • Description:

wrapperClassName?

  • Type:
    string
  • Description:

fromDate?

  • Type:
    Date
  • Description:

toDate?

  • Type:
    Date
  • 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:

dropdownCaption?

  • Type:
    boolean
  • Default:
    false
  • Description:

disabled?

  • Type:
    Matcher[]
  • Description:

selected?

  • Type:
    Date
  • Description:

defaultSelected?

  • Type:
    Date
  • Description:

open?

  • Type:
    boolean
  • Description:

onClose?

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

onOpenToggle?

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

onMonthSelect?

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

year?

  • Type:
    Date
  • Description:

onYearChange?

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

strategy?

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

data-color?

  • Type:
    (string & {}) | AkselColor

locale?

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

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

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLInputElement>
  • Description:

useMonthpicker

required?

  • Type:
    boolean
  • Description:

onMonthChange?

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

inputFormat?

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

onValidate?

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

defaultYear?

  • Type:
    Date
  • Description:

allowTwoDigitYear?

  • Type:
    boolean
  • Default:
    true
  • Description:

fromDate?

  • Type:
    Date
  • Description:

toDate?

  • Type:
    Date
  • Description:

disabled?

  • Type:
    Matcher[]
  • Description:

defaultSelected?

  • Type:
    Date
  • 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.