仅选择开始日期或结束日期时如何处理反应日期范围（日期范围）的 onChange 事件

Question

1. I have a component DateRange using react-date-range, Import:

import { Range, DateRange, RangeKeyDict } from 'react-date-range';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';

Default value:

 const [dateRangeValue, setDateRangeValue] = useState<Range>({
        startDate: new Date(),
        endDate: new Date(),
    });

Fuction:

const handelOnchange = (itemRespon: Range): void => {
        console.log('itemRespon,', itemRespon);
        //Display start end date which was chosen
        renderFooteDate(itemRespon);
        //Set new date range value
        setDateRangeValue(itemRespon);
        //CallBackParrent to give data back
    };

Component:

 <DateRange
 className={style.dateRangeWrapper}
 editableDateInputs={true}
 onChange={(item: RangeKeyDict): void => handelOnchange(item.selection)}
 moveRangeOnFirstSelection={false}
 ranges={[{ ...dateRangeValue, key: 'selection' }]}
 months={2}
 direction="horizontal"
 />

Picture: Date

2.I hope i can get value when ever i chose only start date or end date, but currently it only active onChange event when i click both start and end date. I do not always need both start and end, sometimes i just need 1 of them is enough.

Answer 1

I tried to reproduce the error, but it works fine for me.
Please see example .
The only thing you have to do is to press Enter after changing the date, then the changes will be applied.