• Velge en spesifikk måned.
Installer
Monthpicker med select-meny
MonthPicker uten select-meny
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
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
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
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.
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