• Velge en eller flere dager
  • Velge en periode
Installer
MonthPicker uten select-meny
Monthpicker med select-meny
children? ReactNode
Element datepicker anchors to. Use <DatePicker.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
locale?"nb" | "nn" | "en"
Changes datepicker locale
fromDate? Date
The earliest day to start navigation.
toDate? Date
The latests day to end navigation.
dropdownCaption?boolean
Display dropdown for choosing the month and the year. Needs `fromDate` + `toDate` to work.
disabled? Matcher[]
Apply the disabled modifier to the matching days. https://react-day-picker.js.org/api/types/Matcher
disableWeekends?boolean
Disable saturday and sunday.
showWeekNumber?boolean
Shows week numbers in left-column. Use with caution, takes up valuable screenspace for small screens.
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 `<DatePicker.Input />` is used
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
mode? "single" | "multiple" | "range"
onSelect? ((val?: Date) => void) | ((val?: Date[]) => void) | ((val?: DateRange | undefined) => void) | undefined
selected? Date | Date[] | DateRange
defaultSelected? Date | Date[] | DateRange
min? number
max? number
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>
DatePicker.Input extends HTMLInputElement
defaultSelected? Date
The initially selected Date
defaultMonth? Date
Default shown month
required? boolean
Make selection of Date required
onDateChange? ((val?: Date) => void)
Callback for changed state
inputFormat?string
Input-format
onValidate? ((val: DateValidationT) => void)
validation-callback
locale?"nb" | "nn" | "en"
Changes datepicker locale
fromDate? Date
The earliest day to start navigation.
toDate? Date
The latests day to end navigation.
disabled? Matcher[]
Apply the disabled modifier to the matching days. https://react-day-picker.js.org/api/types/Matcher
disableWeekends?boolean
Disable saturday and sunday.
defaultSelected? DateRange
The initially selected DateRange
onRangeChange? ((val?: DateRange) => void)
Callback for changed state
onValidate? ((val: RangeValidationT) => void)
validation-callback
locale?"nb" | "nn" | "en"
Changes datepicker locale
fromDate? Date
The earliest day to start navigation.
toDate? Date
The latests day to end navigation.
disabled? Matcher[]
Apply the disabled modifier to the matching days. https://react-day-picker.js.org/api/types/Matcher
disableWeekends?boolean
Disable saturday and sunday.
defaultMonth? Date
Default shown month
required? boolean
Make selection of Date required
inputFormat?string
Input-format
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