Beta
Komponenten er under utvikling. Dette kan medføre bugs slik at teamet ditt må ta stilling til om dere ønsker å bruke denne i produksjon. Hvis komponenten er prefikset med UNSAFE kan det også medføre breaking-changes i patch/minor versjon av kodepakker og i Figma. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!
Send innspillIntro
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 UNSAFE_useMonthpicker-hook hvis man har et input-felt
Bruk onValidate-callback for å håndtere validering.
Bruk
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.
Tilgjengelighet
For best mulig tilgjengelighet anbefaler vi å ta i bruk MonthPicker.Input sammen med useMonthpicker.
Retningslinjer
Bruk i modal
Modalen til designsystemet bruker standard position: relative for å kunne posisjonere "X"-knappen. Dette gjør at all bruk av popover ikke klarer å hoppe ut av modal-boksen. Du kan fikse dette ved å sette strategy="fixed" på MonthPicker.
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.
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
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
- className? string
- ref? Ref<HTMLInputElement>
- 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
| Token | Fallback |
| --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 |