Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

I am using react datepicker and I have a calendar icon that when you click it popups the calendar. I implemented where the calendar closes

I am using react datepicker and I have a calendar icon that when you click it popups the calendar. I implemented where the calendar closes when I click anywhere outside the calendar, but I want to close the calendar popup when I click the calendar icon as well. right now it goes in an out when i click the icon again.

here is relvant code:

const handleDateChange = (e, newDate) => {

e.preventDefault();

const date = new Date(dateformat(newDate,"isoDate", true)+'T00:00:00.000');

setCalendarDate(date);

history.push(`/${page}/${sport}/${newDate}`);

};

const handleClick = (e) => {

e.preventDefault();

setIsOpen(!isOpen)

};

const handleOutsideClick =(e)=>{

if(isOpen && !e.target.closest(".react-datepicker")){

setIsOpen(false)

}

}

DropdownToggle tag="div" className="date-choose pad-left-0 pad-right-0">

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Mastering Real Time Analytics In Big Data A Comprehensive Guide For Everyone

Authors: Lennox Mark

1st Edition

B0CPTC9LY9, 979-8869045706

More Books

Students also viewed these Databases questions

Question

Why do mergers and acquisitions have such an impact on employees?

Answered: 1 week ago

Question

2. Describe the functions of communication

Answered: 1 week ago