Date Picker Type issue

[CodeBernardo]

I just updated the React Date Picker to the latest version, but I'm encountering type errors that I can't resolve. I'm using @types/react@19.0.8

my component:
"use client"

import { localeDateFormat } from "@/lite/services/utils/formats"
import classNames from "classnames"
import DatePicker, { DatePickerProps } from "react-datepicker"

type IReportBuilderOptionsDateInput = {
id: string
label?: string
value: Date | null
placeholder?: string
className?: string
inputClassName?: string
labelClassName?: string
onChange: DatePickerProps["onChange"]
}

const ReportBuilderOptionsDateInput = (
props: IReportBuilderOptionsDateInput
) => {
const {
id,
className,
inputClassName,
label,
labelClassName,
placeholder,
value,
onChange
} = props
return (
<label
htmlFor={id}
className={classNames(
"input input-sm input-bordered my-1 flex items-center gap-2",
className
)}
>
<DatePicker
id={id}
selected={value || null}
onChange={onChange} <------------------------ TYPE ERROR HERE !!!!!
placeholderText={placeholder}
dateFormat={localeDateFormat}
className={classNames("grow bg-transparent", inputClassName)}
/>
{label && (
<span className={classNames("badge badge-primary", labelClassName)}>
{label}

)}

)
}

export default ReportBuilderOptionsDateInput

the error is:

Type '{ id: string; selected: Date | null; onChange: ((date: Date | null, event?: MouseEvent<HTMLElement, MouseEvent> | KeyboardEvent<HTMLElement> | undefined) => void) | ((date: [...], event?: MouseEvent<...> | ... 1 more ... | undefined) => void) | ((date: Date[] | null, event?: MouseEvent<...> | ... 1 more ... | undefi...' is not assignable to type 'IntrinsicAttributes & (IntrinsicClassAttributes<DatePicker> & ((Pick<Readonly<Omit<Omit<YearDropdownProps, "date" | ... 3 more ... | "maxDate"> & ... 9 more ... & { ...; }, "dropdownMode" | ... 19 more ... | "onTimeChange"> & ... 4 more ... & { ...; }>, "date" | ... 121 more ... | "onChangeRaw"> & InexactPartial<......'. Property 'selectsMultiple' is missing in type '{ id: string; selected: Date | null; onChange: ((date: Date | null, event?: MouseEvent<HTMLElement, MouseEvent> | KeyboardEvent<HTMLElement> | undefined) => void) | ((date: [...], event?: MouseEvent<...> | ... 1 more ... | undefined) => void) | ((date: Date[] | null, event?: MouseEvent<...> | ... 1 more ... | undefi...' but required in type 'Pick<Readonly<Omit<Omit<YearDropdownProps, "date" | "onChange" | "year" | "minDate" | "maxDate"> & Omit<MonthDropdownProps, "onChange" | "month"> & ... 10 more ... & { ...; }, "dropdownMode" | ... 19 more ... | "onTimeChange"> & ... 4 more ... & { ...; }>, "date" | ... 121 more ... | "onChangeRaw">'.ts(2322) index.d.ts(96, 5): 'selectsMultiple' is declared here.

[anfelipeloal]

I'm having the same issue after update the library to the latest version. I'm using:

"react-datepicker": "8.0.0"
"@types/react": "19.0.8"
"react": "19.0.0"
"next": "15.1.6"

[cattermo]

The type union does not work properly. One seems to always get the type meant for "selectsRange" where date is a tuple.

& ({
    selectsRange?: false;
    selectsMultiple?: false;
    onChange?: (date: Date | null, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
} | {
    selectsRange: true; // <------- This type gets chosen even though my component does not set selectsRange
    selectsMultiple?: never;
    onChange?: (date: [Date | null, Date | null], event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
} | {
    selectsRange?: never;
    selectsMultiple: true;
    onChange?: (date: Date[] | null, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
});

[macher91]

Workaround for it:

const extraParams = () => {
        if (selectsRange) {
            return {
                selectsRange,
                onChange: onChange as (date: [Date | null, Date | null]) => void
            }
        }
        if (selectsMultiple) {
            return {
                selectsMultiple,
                onChange: onChange as (date: Date[] | null) => void
            }
        }
        return {
            onChange: onChange as (date: Date | null) => void
        }
    }

in component:

<DatePicker
    {...extraParams()}

[nik-webdevelop]

Same issue

"react-datepicker": "8.3.0"
"@types/react": "19.0.8"
"react": "19.1.2"

[baebaemin]

Same issue
"react-datepicker": "7.5.0",
"@types/react": "^19",
"react": "^19.0.0",

[fnbo-evanbrooks]

I've also encountered this issue when using react-datepicker to make a component library for my company's use. It's very tricky to work around. I've yet to find a solution that works in our multiple levels of inheritance wrapping react-datepicker.

[robphoenix]

Same issue