There is no toggleCalendarOnIconClick inside ReactDatePickerProps.

[tudadar]

I'm trying to use this feature by looking at the example in the official documentation.
I actually tried to apply the feature and it works.

However, I get an error in the vscode saying that the props are missing, and they are.

      <ReactDatePicker
        className={`${styles.datepicker} ${width} ${
          props.error &&
          '!border-[#E92447] hover:border-[#E92447] hover:ring-[#E92447] focus:border-[#E92447] focus:ring-[#E92447] focus:hover:border-[#E92447] focus:hover:ring-[#E92447] focus:active:ring-[#E92447]'
        } hover:ring-[0.5px] hover:ring-inset hover:ring-[#404044]`}
        locale={ko}
        dateFormat={props.dateFormat}
        selected={date}
        onChange={(date) => setDate(date)}
        showYearDropdown
        yearDropdownItemNumber={15}
        scrollableYearDropdown
        icon={
          <div className={`${styles.calendar}`}>
            <Calendar />
          </div>
        }
        showIcon
        toggleCalendarOnIconClick // props missing
        minDate={props.minDate}
        maxDate={props.maxDate}
        placeholderText={props.placeHolderText}
        onKeyDown={(e) => {
          e.preventDefault();
        }}
      />

[thwlckd]

I had same problem, and resolved it by specifying type for toggleCalendarOnIconClick in the interface ReactDatePickerProps

/@types/react-datepicker/index.d.ts

export interface ReactDatePickerProps<
    CustomModifierNames extends string = never,
    WithRange extends boolean | undefined = undefined,
> {
    adjustDateOnChange?: boolean | undefined;
    allowSameDay?: boolean | undefined;
    ariaDescribedBy?: string | undefined;
    ...
    toggleCalendarOnIconClick?: boolean | undefined;  // add this line
}

[tudadar]

@thwlckd

I know, but we need to fix it with an update in the ReactDatePicker library.

[balajis-qb]

Hi @tudadar ,

I worked on the toggleCalendarOnIconClick prop. The type definitions are maintained in a separate repo

I raise a PR updating the type definition on that repo.

I hope we can close this issue here as the issue is not related to this repo.

[subhashreerautray]

This is a requirement for my project as well, and this issue still does occur, is there any ETA for this?

[balajis-qb]

Hi @subhashreerautray,

As I mentioned in my previous comment, this issue is with the @types/react-datepicker repo. I opened an issue in their repo and created PR also to fix that issue. I hope that'll be merged soon once someone reviews my change. I don't have any ETA as the update from my part is completed and now someone has to review it.

As a quick fix, you can use this solution or may be temporarily skip the usage of @types/react-datepicker dependency. I'll update in this ticket once my PR gets merged. Hope my answer helps.

[balajis-qb]

My PR fix got approved. It'll be available whenever they release the version DefinitelyTyped/DefinitelyTyped#68282

[tudadar]

PR has been merged, we will close this issue.
Thanks for the help, everyone.