| | |
| | | } |
| | | |
| | | 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" |