react-multi-date-picker
react-multi-date-picker copied to clipboard
Calendar not Closing on Click outside
When i click outside calendar nothing happens, plus i use Datepicker as a SubmissionForm so there is second problem with that. When i click on any other field to type, dates which i picked before will just disapper.
My code:
<DatePicker inputClass="custom-input" ref={datePickerRef} value={startDate} multiple plugins={[<DatePanel />]} minDate={ new Date( new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1 ) } mapDays={({ date }) => { let isWeekend = [0, 6].includes(date.weekDay.index);
if (isWeekend)
return {
disabled: true,
style: { color: "#ccc" },
onClick: () => alert("weekends are disabled"),
};
}}
hideOnScroll
weekStartDayIndex={1}
weekDays={["NE", "PO", "UT", "STR", "ŠT", "PIA", "SO"]}
months={[
"Jan",
"Feb",
"Mar",
"Apr",
"Máj",
"Jún",
"Júl",
"Aug",
"Sep",
"Okt",
"Nov",
"Dec",
]}
/>
I tested your code and it closes when clicking outside the DatePicker. Also, keep your dates in a state to prevent losing them in the next rerender.
https://codesandbox.io/s/click-outside-1u21jd?file=/src/App.js