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/[email protected]

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