Gå til hovedinnhold
KOMPONENTER

DatePicker

DatePicker og NativeDatePicker er komponenter for å velge datoer.

Komponenter

DatePicker

NavnTypePåkrevd?Default-verdiBeskrivelse
selectedDateDate

Hva som er den valgte datoen

onChange((date: Date | null, event: SyntheticEvent<any, Event>) => void) & ((date: Date | null, event: SyntheticEvent<any, Event> ) => void)

Kalles når datoen/tiden endres

placeholderstring "Velg dato"

Placeholder om ingen dato er valgt

classNamestring

Ekstra klassenavn

adjustDateOnChangeboolean
allowSameDayboolean
ariaLabelledBystring
autoCompletestring
autoFocusboolean
calendarClassNamestring
calendarContainer((props: { children: ReactNode[]; }) => ReactNode)
clearButtonTitlestring
customInputReactNode
customInputRefstring
dateFormatstring | string[]
dateFormatCalendarstring
dayClassName((date: Date) => string | null)
disabledboolean
disabledKeyboardNavigationboolean
dropdownMode"select" | "scroll"
endDateDate | null
excludeDatesDate[]
excludeTimesDate[]
filterDate((date: Date) => boolean)
fixedHeightboolean
forceShowMonthNavigationboolean
formatWeekDay((formattedDate: string) => string)
formatWeekNumber((date: Date) => string | number)
highlightDates(Date | HighlightDates)[]
idstring
includeDatesDate[]
includeTimesDate[]
injectTimesDate[]
inlineboolean
inlineFocusSelectedMonthboolean
isClearableboolean
localestring | Locale
maxDateDate | null
maxTimeDate
minDateDate | null
minTimeDate
monthsShownnumber
namestring
nextMonthButtonLabelstring
nextYearButtonLabelstring
onBlur((event: FocusEvent<HTMLInputElement>) => void)
onCalendarClose(() => void)
onCalendarOpen(() => void)
onChangeRaw((event: FocusEvent<HTMLInputElement>) => void)
onClickOutside((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)
onDayMouseEnter((date: Date) => void)
onFocus((event: FocusEvent<HTMLInputElement>) => void)
onInputClick(() => void)
onInputError((err: { code: number; msg: string; }) => void)
onKeyDown((event: KeyboardEvent<HTMLDivElement>) => void)
onMonthChange((date: Date) => void)
onMonthMouseLeave(() => void)
onSelect((date: Date, event: SyntheticEvent<any, Event> ) => void)
onWeekSelect((firstDayOfWeek: Date, weekNumber: string | number, event: SyntheticEvent<any, Event> ) => void)
onYearChange((date: Date) => void)
openboolean
openToDateDate
peekNextMonthboolean
placeholderTextstring
popperClassNamestring
popperContainer((props: { children: ReactNode[]; }) => ReactNode)
popperModifiersModifiers
popperPlacementstring
popperProps{}
preventOpenOnFocusboolean
previousMonthButtonLabelstring
previousYearButtonLabelstring
readOnlyboolean
renderCustomHeader((params: { date: Date; changeYear(year: number): void; changeMonth(month: number): void; decreaseMonth(): void; increaseMonth(): void; prevMonthButtonDisabled: boolean; nextMonthButtonDisabled: boolean; }) => ReactNode)
renderDayContents((dayOfMonth: number, date?: Date ) => ReactNode)
requiredboolean
scrollableMonthYearDropdownboolean
scrollableYearDropdownboolean
selectedDate | null
selectsEndboolean
selectsStartboolean
shouldCloseOnSelectboolean
showDisabledMonthNavigationboolean
showMonthDropdownboolean
showMonthYearDropdownboolean
showMonthYearPickerboolean
showPopperArrowboolean
showPreviousMonthsboolean
showQuarterYearPickerboolean
showTimeInputboolean
showTimeSelectboolean
showTimeSelectOnlyboolean
showWeekNumbersboolean
showYearDropdownboolean
startDateDate | null
startOpenboolean
strictParsingboolean
tabIndexnumber
timeCaptionstring
timeFormatstring
timeInputLabelstring
timeIntervalsnumber
titlestring
todayButtonReactNode
useShortMonthInDropdownboolean
useWeekdaysShortboolean
valuestring
weekLabelstring
withPortalboolean
wrapperClassNamestring
yearDropdownItemNumbernumber

Komponenten vår er bygget på react-datepicker, og støtter dermed en rekke props(som forsåvidt ligger i lista over) , selv om 100% kompabilitet ikke kan garanteres. Les mer om disse her.

Den støtter også date-fns og det anbefales at datofunksjonene fra date-fns brukes. Eksempelvis addWeeks for å sette en maksgrense på én uker man kan velge datoer fra.

For deg som ønsker å støtte mobil, så eksisterer det også en NativeDatePicker. Den wrapper en input hvor type="date", som i noen sammenhenger kan være og foretrekke.