反应日期选择器 | 单击图标时打开日历，但单击任意位置时关闭

Question

Currently I'm trying to, when clicking the icon, be able to open the calendar (which I can do) but I would like to close the calendar when clicking anywhere else of the window.

I'm not entirely sure on how to do this and would love to have some help

Here's my component

const DatePicker: FC<Props> = ({
  label,
  icon,
  date,
  onChange,
  minDate,
  maxDate,
  tabIndex,
}) => {
  const dateObj = useMemo(() => (date ? date.toDate() : null), [date])
  const minDateObj = useMemo(() => (minDate ? minDate.toDate() : null), [
    minDate,
  ])
  const maxDateObj = useMemo(() => (maxDate ? maxDate.toDate() : null), [
    maxDate,
  ])

  const [calendarIsOpen, setCalendarIsOpen] = useState(false)

  return (
    <div className={css.host}>
      <div className={css.label}>{label}</div>
      <div className={css.wrapper}>
        <label>
          <button
            className={css.calendarButton}
            onClick={() => setCalendarIsOpen(!calendarIsOpen)}
          >
            {icon}
          </button>
        </label>
        <ReactDatePicker
          selected={dateObj}
          className={css.input}
          calendarClassName={css.calendar}
          showTimeSelect
          dateFormat="dd/MM/yyyy h:mm:ss aa"
          onChange={(newDate: Date) => {
            if (newDate) {
              const momentDate = moment(newDate)
              onChange(momentDate)
            }
          }}
          startDate={minDateObj}
          endDate={maxDateObj}
          minDate={minDateObj}
          maxDate={maxDateObj}
          showPopperArrow={false}
          popperModifiers={{
            offset: {
              enabled: true,
              offset: '-28px, 4px',
            },
          }}
          renderCustomHeader={customHeader}
          open={calendarIsOpen}
          tabIndex={tabIndex}
        />
      </div>
    </div>
  )
}

export default DatePicker

Answer 1

Solution:

This should work.

/**
 * Hook that alerts clicks outside of the passed ref
 */
function useOutsideAlerter(ref, onOutSideClick) {
  /**
   * Alert if clicked on outside of element
   */
  function handleClickOutside(event) {
    if (ref.current && !ref.current.contains(event.target)) {
      onOutSideClick();
    }
  }

  useEffect(() => {
    // Bind the event listener
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      // Unbind the event listener on clean up
      document.removeEventListener("mousedown", handleClickOutside);
    };
  });
}

export default function DatePicker({ onOutSideClick,...props }) {
  const wrapperRef = useRef(null);
  useOutsideAlerter(wrapperRef, onOutSideClick);
   /// your code
  return (
   // your code
  );
}

and use call it like <DatePicker onOutsideClick={()=>{// hide this date picker component.}}/>