React DatePicker click on close

react-datepicker 라이브러리에서 날짜를 선택하거나 바깥 영역을 클릭시 창을 닫는 기능

예제 코드

<DatePicker
	selected={searchOptions.startDate}
	onChange={(date) => {
		setSearchOptions({ ...searchOptions, startDate: date });
		setIsStartDate(!isStartDate);
		clearOpens();
	}}
	onInputClick={() => {
		clearOpens();
		setIsStartDate(!isStartDate);
	}}
	onClickOutside={() => clearOpens()}
	shouldCloseOnSelect={false}
	open={isStartDate}
	selectsStart
	startDate={searchOptions.startDate}
	endDate={searchOptions.endDate}
	placeholderText="FromDate"
	className="bg-gray-500 rounded-lg p-2 font-medium h-12 w-full placeholder-gray-300 outline-none"
></DatePicker>

날짜 선택시 모달창 닫기

onChange 핸들러에 clearOpens() 함수를 통해 날짜가 선택됬을때 open 인자에 상태값을 반전시켜 모달창을 닫게 설정

바깥 영역 클릭시 모달창 닫기

onClickOutside 핸들러에 clearOpens() 함수를 통해 open 인자에 상태값을 반전시켜 모달창을 닫게 설정