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

MonthPicker

Oppdatert 18. august 2023Stabil
GithubYarn FigmaEndringslogg

    Intro

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

    Egnet til:

    • Velge en spesifikk måned

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

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

    Bruk onValidate-callback for å håndtere validering.

    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. Dette lar bruker lettere finne den tidsperioden de ønsker å velge fra.

    GjørMonthpicker med select-meny
    UnngåMonthPicker uten select-meny

    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.

    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? ReactNode
    Element monthpicker anchors to. Use <MonthPicker.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
    fromDate? Date
    The earliest month to start navigation.
    toDate? Date
    The latest day to end navigation.
    locale?"nb" | "nn" | "en"
    Changes monthpicker locale
    dropdownCaption?boolean
    Display dropdown for choosing year. Needs `fromDate` + `toDate` to work.
    disabled? Matcher[]
    Apply the disabled modifier to the matching months. Uses a subset of React Day Picker Matcher type. https://react-day-picker.js.org/api/types/Matcher
    selected? Date
    Controlled selected-month
    defaultSelected? Date
    Default selected month.
    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 `<MonthPicker.Input />` is used
    onMonthSelect? Function
    Callback for user-controlled state
    year? Date
    Used to set visible year programmatically. Component controlled by default
    onYearChange? ((y?: Date) => void)
    Event fired when the user navigates between years.
    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

    MonthPicker.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
    MonthPicker.Input extends HTMLInputElement

    useMonthpicker

    required? boolean
    Make Date-selection required
    onMonthChange? ((date?: Date) => void)
    Callback for month-change
    inputFormat?string
    Input-format
    onValidate? ((val: MonthValidationT) => void)
    validation-callback
    defaultYear? Date
    Default shown year
    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 monthpicker locale
    fromDate? Date
    The earliest month to start navigation.
    toDate? Date
    The latest day to end navigation.
    disabled? Matcher[]
    Apply the disabled modifier to the matching months. Uses a subset of React Day Picker Matcher type. https://react-day-picker.js.org/api/types/Matcher
    defaultSelected? Date
    Default selected month.

    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

    © 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