Q. Can't 'open' and 'closeOnClickOutside' properties be used together?

[necro42]

I want to express the period. When startDate is selected, to open the endDate. So, I used open. Then the closeOnClickOutside property was not working. Is there a solution that allows me to do something like this?

My code

import React, { useState } from "react";

import {InputGroup, InputGroupAddon, InputGroupText } from "reactstrap";
import ReactDatetimeClass from "react-datetime";
import "react-circular-progressbar/dist/styles.css";
import { useEffect } from "react";
import moment, { Moment } from "moment";
import axios from "axios";

const DateData = () => {
  const [ data, setData ] = useState([]);
  const [ startDate, onChangeStartDate] = useState<Moment|string|undefined>(undefined);
  const [ endDate, onChangeEndDate] = useState<Moment|string|undefined>(undefined);

  const [openStartDate, onOpenStartDate] = useState(false);
  const [openEndDate, onOpenEndDate] = useState<boolean|undefined>(false);

  const analysisRequest = () => {
    if(startDate && endDate && moment.isMoment(startDate) && moment.isMoment(endDate)) {
      // startDate와 endDate가 있다면 기간 api
      const response = axios.get(`/datedata?start=${startDate.format('YYYYMMDD')}&enddate=${endDate.format('YYYYMMDD')}`)
      setData(response)
    }
  }

  useEffect(() => {
    if(startDate && (moment.isMoment(startDate)  && endDate && (moment.isMoment(endDate))) {
      analysisRequest();
    }
  }, [startDate, endDate]);

  return (
    <InputGroup className="input-group-alternative" style={{width:'auto', float:"right"}}>
      <InputGroupAddon addonType="prepend">
        <InputGroupText>
          <i className="ni ni-calendar-grid-58" />
        </InputGroupText>
      </InputGroupAddon>
      <ReactDatetimeClass
            inputProps={{
              placeholder: "YYYY-MM-DD"
            }}
            className={moment.isMoment(startDate) || (startDate == undefined && endDate == undefined) ? "" : 'border border-danger'}
            timeFormat={false}
            dateFormat="YYYY-MM-DD"
            renderInput={(props, opencalendar, closeCalendar)=> {
              return <input {...props } onBlur={()=>onOpenStartDate(false)}/>
            }}
            renderDay={(props, currentDate, selectedDate) => {
              let classes = props.className;
              if (
                startDate &&
                endDate &&
                (startDate as any)._d + "" === currentDate._d + ""
              ) {
                classes += " start-date";
              } else if (
                startDate &&
                endDate &&
                new Date((startDate as any)._d + "") <
                  new Date(currentDate._d + "") &&
                new Date((endDate as any)._d + "") >
                  new Date(currentDate._d + "")
              ) {
                classes += " middle-date";
              } else if (
                endDate &&
                (endDate as any)._d + "" === currentDate._d + ""
              ) {
                classes += " end-date";
              }
              return (
                <td {...props} className={classes}>
                  {currentDate.date()}
                </td>
              );
            }}
            isValidDate ={(current)=> {
              return current.isSameOrBefore(moment.now())
            }}
            open={openStartDate}
            onOpen={(e)=> {
              onOpenEndDate(false)
              onOpenStartDate(true)
            }}
            onClose={(e)=>{
              onOpenStartDate(false)
            }}
            onChange={e => {
              if(e === '') {
                onChangeStartDate(undefined)
                onOpenStartDate(false)
              } else if(typeof(e) == 'string') {
                onChangeStartDate(undefined)
                onOpenStartDate(true)
              } else {
                onChangeStartDate(e)
                onOpenStartDate(false)
                onOpenEndDate(true)
              }
            }}
            closeOnClickOutside ={true}
          />
          <ReactDatetimeClass
            inputProps={{
              placeholder: "YYYY-MM-DD"
            }}
            className={moment.isMoment(endDate) || (startDate == undefined && endDate == undefined) ? "" : 'border border-danger'}
            timeFormat={false}
            dateFormat="YYYY-MM-DD"
            renderInput={(props, opencalendar, closeCalendar)=> {
              console.log(props)
              return <input {...props } onBlur={()=>{
                if(endDate == "" || endDate == undefined) {
                  onOpenEndDate(undefined)}
                }
              }/>
            }}
            renderDay={(props, currentDate, selectedDate) => {
              let classes = props.className;
              if (
                startDate &&
                endDate &&
                (startDate as any)._d + "" === currentDate._d + ""
              ) {
                classes += " start-date";
              } else if (
                startDate &&
                endDate &&
                new Date((startDate as any)._d + "") <
                  new Date(currentDate._d + "") &&
                new Date((endDate as any)._d + "") >
                  new Date(currentDate._d + "")
              ) {
                classes += " middle-date";
              } else if (
                endDate &&
                (endDate as any)._d + "" === currentDate._d + ""
              ) {
                classes += " end-date";
              }
              return (
                <td {...props} className={classes}>
                  {currentDate.date()}
                </td>
              );
            }}
            isValidDate ={(current)=> {
              return startDate== undefined ||  (current.isSameOrBefore(moment.now()) && current.isSameOrAfter(startDate))
            }}
            open={openEndDate}
            onOpen={(e)=> {
              onOpenStartDate(false)
              onOpenEndDate(true)
            }}
            onClose={(e)=>{
              onOpenEndDate(false)
            }}
            onChange={e => {
              if (e ==='') {
                onChangeEndDate(undefined)
                onOpenEndDate(false)
              } else if(typeof(e) == 'string') {
                onChangeEndDate(e)
                onOpenEndDate(true)
              } else {
                onChangeEndDate(e)
                onOpenEndDate(false)
              }
            }}
            closeOnSelect={true}
            closeOnClickOutside ={true}
          />
    </InputGroup>
  );
};

export default DateData;