React-date-picker: Typescript Declarations now incomplete (e.g. value & onChange properties not found)

[JMS-1]

Since you removed index.d.ts from react-calendar the typescript declaration of react-date-picker is not always working. In our webpack environment neither value nor onChange can be found.

[wojtekmaj]

Typings will be moved completely to @DefinitelyTyped. React-Calendar typings were just merged there so this may help with your issue

[JMS-1]

thank you, did it.

[hatchli]

So I'm having this exact issue. If I create the basic setup as its own component, Typescript doesn't flag anything. But if I try and use it in an existing component, onChange gets flagged as such:

(JSX attribute) CalendarProps.onChange?: OnChangeDateCallback
Type 'Dispatch<SetStateAction<Date>>' is not assignable to type 'OnChangeDateCallback'.
  Types of parameters 'value' and 'date' are incompatible.
    Type 'Date | Date[]' is not assignable to type 'SetStateAction<Date>'.
      Type 'Date[]' is not assignable to type 'SetStateAction<Date>'.
        Type 'Date[]' is missing the following properties from type 'Date': toDateString, toTimeString, toLocaleDateString, toLocaleTimeString, and 37 more.ts(2322)
index.d.ts(41, 3): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & DatePickerProps'

I installed @types/react-calendar based on what you guys were talking about, but that doesn't seem to have done anything... I still can't compile.

What exactly am I doing wrong here?

[pedroR]

I am facing the same issue. I added "@types/react-calendar": "^3.1.0", but have a similar issue.

Type 'Dispatch>' is not assignable to type 'OnChangeDateCallback'.
Types of parameters 'value' and 'date' are incompatible.
Type 'Date | Date[]' is not assignable to type 'SetStateAction'.
Type 'Date[]' is not assignable to type 'SetStateAction'.
Type 'Date[]' is missing the following properties from type 'Date': toDateString, toTimeString, toLocaleDateString, toLocaleTimeString, and 37 more.

const [value, onChange] = useState(new Date());

....

<DatePicker
                onChange={onChange}
                value={value}
            />

[wojtekmaj]

I encourage you and other community members to contribute and fix the typings, and preferably move them to @DefinitelyTyped :)

[OZZlE]

So I'm having this exact issue. If I create the basic setup as its own component, Typescript doesn't flag anything. But if I try and use it in an existing component, onChange gets flagged as such:

(JSX attribute) CalendarProps.onChange?: OnChangeDateCallback
Type 'Dispatch<SetStateAction<Date>>' is not assignable to type 'OnChangeDateCallback'.
  Types of parameters 'value' and 'date' are incompatible.
    Type 'Date | Date[]' is not assignable to type 'SetStateAction<Date>'.
      Type 'Date[]' is not assignable to type 'SetStateAction<Date>'.
        Type 'Date[]' is missing the following properties from type 'Date': toDateString, toTimeString, toLocaleDateString, toLocaleTimeString, and 37 more.ts(2322)
index.d.ts(41, 3): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & DatePickerProps'

I installed @types/react-calendar based on what you guys were talking about, but that doesn't seem to have done anything... I still can't compile.

What exactly am I doing wrong here?

This is how the onChange signature needs to be defined as:

const Component = (props) => {    
  const [value, setValue] = useState(new Date());

  const onChange = (date: Date | Date[]):void => {
    if (date instanceof Date) {
      setValue(date)
    }
  }

  return (
    <DatePicker onChange={onChange} value={value} />
  )
}

Not sure how you can select multiple dates with this module though but that's how it needs to be typed

[wojtekmaj]

Not sure how you can select multiple dates with this module though but that's how it needs to be typed

returnValue="range" would cause React-Date-Picker to return range of dates, which may come in handy when you also use maxDetail to limit your selection to month/year/decade instead of day. So you can e.g. get [January 1 2021 00:00:00, January 31 23:59:59] when clicking on January.