react-multi-date-picker icon indicating copy to clipboard operation
react-multi-date-picker copied to clipboard

Calendar not Closing on Click outside

Open Ansaen opened this issue 2 years ago • 1 comments

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",
    ]}
/>

Ansaen avatar May 16 '22 14:05 Ansaen

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

shahabyazdi avatar May 20 '22 11:05 shahabyazdi