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.
Gjør
Unngå
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
| 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 |
| --ac-date-input-button-hover-text | --a-text-action-on-action-subtle |
| --ac-date-input-button-hover-bg | --a-surface-action-subtle-hover |