Make Calendar Icon Clickable

[sinklair]

When the calendar icon is displayed, clicking it does not display the calendar/time selectors. Most datetime pickers that display a calendar will display the calendar when the icon is clicked.

[nitink66]

The same issue is faced after updating the package to the latest version - 4.16.0.

[nitink66]

Previous issue raised for the same Opening DatePicker Manually #685

[sinklair]

@nitink66 I disagree on this being the same issue. If I follow that very long thread correctly, the issue there is opening the calendar programmatically. I am requesting that clicking the calendar icon have a built-in behavior to open the picker.

[AndersRemienHansen]

Was utterly surprised not being able to solve this out of the box. Any suggested options for handling this for now?

[subhashreerautray]

toggleCalendarOnIconClick props is not available on datepicker

open issue #4461

[balajis-qb]

Hi @subhashreerautray ,

The toggleCalendarOnIconClick is available on the react-datepicker. If you check our documentation https://reactdatepicker.com/#example-toggle-calendar-open-status-on-click-of-the-calendar-icon we documented how to use that feature.

The only problem is @types/react-datepicker repo is not updated with this change. If you are not using typescript or didn't install @types/react-datepicker in your TypeScript project you can able to use this feature even now. I already created a PR on that repo to fix that issue, I hope that'll be merged soon once someone reviews my change.

[balajis-qb]

@subhashreerautray, My PR to support the toggleCalendarOnIconClick prop got merged. It'll be available whenever they release the version DefinitelyTyped/DefinitelyTyped#68282

[PetracekSimon]

@balajis-qb

Hello, is there any way to use toggleCalendarOnIconClick prop with using custom icon?

[balajis-qb]

Use the open prop like the below example.

() => {
  const [date, setDate] = useState(new Date());
  const [open, setOpen] = useState(false);

  return (
    <DatePicker
      showIcon
      selected={date}
      open={open}
      onChange={(date) => setStartDate(date)}
      icon={
        <svg
          onClick={() => setOpen(!open)}
        >
          ...
        </svg>
      }
    />
  );
};