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.
Eksempler
Vi anbefaler å bruke useMonthpicker-hook hvis man har et input-felt
Bruk onValidate-callback for å håndtere validering.
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.
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:
locale?
- Type:
"nb" | "nn" | "en"
- Default:"nb" (norsk bokmål)
- 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:
"absolute" | "fixed"
- Default:"absolute"
- Description:
MonthPicker.Input
label
- Type:
ReactNode
- Description:
hideLabel?
- Type:
boolean
- Default:false
- Description:
size?
- Type:
"medium" | "small"
- Default:"medium"
- Description:
variant?
setAnchorRef?
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:
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:
locale?
- Type:
"nb" | "nn" | "en"
- Default:"nb" (norsk bokmål)
- Description:
fromDate?
- Type:
Date
- Description:
toDate?
- Type:
Date
- Description:
disabled?
- Type:
Matcher[]
- Description:
defaultSelected?
- Type:
Date
- Description: