|  |  | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const DatetimeRangeFilter = (props) => { | 
 |  |  |     const [dates, setDates] = React.useState([null, null]); | 
 |  |  |     const [startDate, setStartDate] = React.useState(null); | 
 |  |  |     const [endDate, setEndDate] = React.useState(null); | 
 |  |  |  | 
 |  |  | 
 |  |  |                 <Space direction="vertical" size={12}> | 
 |  |  |                     <DatePicker.RangePicker | 
 |  |  |                         showTime | 
 |  |  |                         onChange={dates => { | 
 |  |  |                             setStartDate(dates[0]?.toISOString()); | 
 |  |  |                             setEndDate(dates[1]?.toISOString()); | 
 |  |  |                         value={dates} | 
 |  |  |                         onChange={changeDates => { | 
 |  |  |                             setDates(changeDates); | 
 |  |  |                             if (changeDates && changeDates[0] && changeDates[1]) { | 
 |  |  |                                 const changeStartStr = changeDates[0]?.toISOString() | 
 |  |  |                                 setStartDate(changeStartStr); | 
 |  |  |                                 const changeEndStr = changeDates[1]?.toISOString() | 
 |  |  |                                 setEndDate(changeEndStr); | 
 |  |  |                                 props.setSelectedKeys([changeStartStr + '-' + changeEndStr]); | 
 |  |  |                             } | 
 |  |  |                         }} | 
 |  |  |                     /> | 
 |  |  |                     <Space> | 
 |  |  |                         <Button | 
 |  |  |                             type="primary" | 
 |  |  |                             onClick={() => { | 
 |  |  |                                 console.log(startDate, endDate); | 
 |  |  |                                 props.confirm(); | 
 |  |  |                                 props.setSearchParam(prevState => ({ | 
 |  |  |                                     ...prevState, | 
 |  |  |                                     [props.name]: [startDate, endDate] | 
 |  |  |                                 })); | 
 |  |  |                                 if (!dates[0] && !dates[1]) { | 
 |  |  |                                     props.setSearchParam(prevState => { | 
 |  |  |                                         const nextState = { ...prevState }; | 
 |  |  |                                         delete nextState[props.name + 'Range']; | 
 |  |  |                                         return nextState; | 
 |  |  |                                     }); | 
 |  |  |                                 } else { | 
 |  |  |                                     props.setSearchParam(prevState => ({ | 
 |  |  |                                         ...prevState, | 
 |  |  |                                         [props.name + 'Range']: [startDate, endDate] | 
 |  |  |                                     })); | 
 |  |  |                                 } | 
 |  |  |                                 props.actionRef.current?.reload(); | 
 |  |  |                             }} | 
 |  |  |                             size="small" | 
 |  |  | 
 |  |  |                         </Button> | 
 |  |  |                         <Button | 
 |  |  |                             onClick={() => { | 
 |  |  |                                 setDates([null, null]); | 
 |  |  |                                 setStartDate(null); | 
 |  |  |                                 setEndDate(null); | 
 |  |  |                                 props.setSelectedKeys([]); | 
 |  |  |                                 props.setSearchParam(prevState => { | 
 |  |  |                                     const nextState = { ...prevState }; | 
 |  |  |                                     delete nextState[props.name]; | 
 |  |  |                                     return nextState; | 
 |  |  |                                 }); | 
 |  |  |                                 props.clearFilters(); | 
 |  |  |                             }} | 
 |  |  |                             size="small" |