Q. Can't 'open' and 'closeOnClickOutside' properties be used together?
Opened this issue · 0 comments
necro42 commented
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;