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
Eksempler
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.
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? ((month?: Date) => void)
- 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
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
- Will be removed in a future major-version @deprecated
- 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.