React-date-picker: Help improving React-Date-Picker's typings

[wojtekmaj]

Hey, community!

I'm trying to improve React-Date-Picker's typings. I'm doing it on branch typings. I think I've managed to do it, but I need a working sample project to test the changes.

I successfully installed /sample/parcel-ts, but I'm getting a weird error:

I figured that it's DatePickerProps interface extending CalendarProps which causes the issue. When I change

interface DatePickerProps extends CalendarProps {

to

interface DatePickerProps {

then the error is gone. But, obviously, now I'm missing typings from CalendarProps and I'm getting different kind of errors.

[jonathanSimonney]

hello, first, thank you very much for your work.

I tried to use your project with typescript, and I guess npm took the types from https://github.com/Hacker0x01/react-datepicker , as the props I have don't correspond to your documentation. (even though I'm not sure at all...)

Here is the react-date-picker/index.d.ts I have in node_modules (which if I'm right, is the one from https://www.npmjs.com/package/@types/react-datepicker ):

import { CalendarProps } from "react-calendar";

declare module "react-date-picker" {
  export default function DatePicker(props: DatePickerProps): JSX.Element;

  export interface DatePickerProps extends CalendarProps {
    calendarClassName?: string | string[];
    calendarIcon?: JSX.Element | null;
    className?: string | string[];
    clearIcon?: JSX.Element | null;
    disabled?: boolean;
    format?: string;
    isOpen?: boolean;
    name?: string;
    required?: boolean;
    showLeadingZeros?: boolean;
  }
}

as typescript doesn't complain about this import, maybe the export default function is some kind of a fix for the typescipt error. (otherwhise, maybe the other react-date-picker will have some inspiration in its code.).

Hope this helps somehow...

[wojtekmaj]

Well these are our typings, exactly the ones we have a problem with :D

https://github.com/wojtekmaj/react-date-picker/blob/master/index.d.ts

[jonathanSimonney]

At least in my IDE it doesn't complain about them... (but it does complains if I try to add the placeholders the doc say are available). I am on Webstorm and have seen coworkers having their vscode IDE complains about things that didn't stop the project from building, where mine didn't complain at all, so maybe this is a part of the problem ?

[jonathanSimonney]

just writing to confirm to you the Date picker works completely fine with typescript on my project. I'm available if you wish more informations. (and otherwhise, don't know if this is a bug or a feature request, and whether or not I should open a new issue about it, but it seems the types you have now aren't up to date with what the documentation mentions as available types.).

Once again thank you for your work.

[alicerocheman]

Hi there,
Just found out that onCalendarOpen is described in README but doesn't exist on type. (in the end I'm not using it so it's not urgent for me, but since it was on the README I thought I'd mention it here)

Property 'onCalendarOpen' does not exist on type 'IntrinsicAttributes & FieldProps & DatePickerProps & { value: Date; onChange: (val: any) => void; minDate: Date; maxDate: Date; readOnly?: boolean; } & { children?: ReactNode; }'. TS2322

[harry-sm]

Made a PR #210 which will address this issue

[thornyweb]

I've opened #254 which will help with some typing issues as the main typing in index.d.ts extends CalendarProps but these aren't included with the package until now.