0
  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.

Tri huynh minh
  • 1
  • 2

1 Answers1

0

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.

Dmitriy Zhiganov
  • 1,060
  • 1
  • 5
  • 14
  • thank you for your example ,but i think it not the one i need . I think i have to custom and make a new one to fit my requirement – Tri huynh minh Dec 21 '22 at 04:34