Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Datepicker onChange event type Error when selectsRange prop is true #4775

Open
Lukaoxp opened this issue May 6, 2024 · 1 comment
Open

Comments

@Lukaoxp
Copy link

Lukaoxp commented May 6, 2024

Describe the bug
Using a datepicker with selectsRange in TypeScript, the onChange event show a Type error as below:
Type '(date: Date | null, event: SyntheticEvent<any, Event> | undefined) => void' is not assignable to type '(date: [Date | null, Date | null], event: SyntheticEvent<any, Event> | undefined) => void'.ts(2769)

imagem_2024-05-06_175147669

Although in the ReactDatePickerProps from index.d.ts there is a typing for onChange, it seems to not be working correctly with the prop WithRange.
onChange( date: WithRange extends false | undefined ? (WithMultiple extends false | undefined ? Date | null : Date[] | null) : [Date | null, Date | null], event: React.SyntheticEvent<any> | undefined, ): void;

image

To Reproduce
Steps to reproduce the behavior:

1 - Create a datepicker that receives a onChange event with the props extending from ReactDatePickerProps.
2 - Add the onChange property to it
3 - Add the selectsRange property to it
4 - See the error.

Here is my code:

import DatePicker, { ReactDatePickerProps } from 'react-datepicker';

interface DatePickerProps extends ReactDatePickerProps {}

export const newDatePicker= (props: DatePickerProps ) => {
const {
    disabled,
    isClearable,
    onChange
  } = props;

<DatePicker
            isClearable={isClearable}
            selectsRange={true}
            onChange={onChange}
            monthsShown={2}
            selected={new Date()}
            startDate={new Date()}
            endDate={new Date()}
            customInput={<TextField />}
            fixedHeight
            dateFormat={'yyyy/MM/dd'}
          />
}

Expected behavior
It should identify that the event is correctly typed.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [Windows 11]
  • Browser [None]
  • Version [6.2.0]

Additional context
In this case I'm trying to use the component on a Form and pass the onChange as a prop. But didn't find a way to fix the typing error without messing with the "index.d.ts" file.

@Lukaoxp Lukaoxp changed the title Datepicker onChange event typing Error when selectsRange prop is true Datepicker onChange event type Error when selectsRange prop is true May 6, 2024
@mirus-ua
Copy link
Contributor

The types for v 6.2.0 are managed by the external package. You can reopen the issue there or wait until v7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants