Date Range Picker not working properly when try to edit directly on input box

[lechu24]

Describe the bug When I try to edit the dates in date range picker directly in the input box without using the range picker the start date and end date is not getting updated rather it is getting reseted to old values.

To Reproduce

1. Go to date range picker
2. Select a date range (ex: 02/11/2023 - 15/12/2023)
3. Now try to edit the date directly on the input box (example change the end date from 15/12/2023 to 18/12/2024)
4. You will see that the date will not get updated it will be reseted again to 15/12/2023.

Expected behavior It should change to 18/12/2024. The expected behaviour is that the date should change even when we directly change that in the input box without changing it through date range picker

Screenshots 1.

[aziyatali]

@lechu24 That's because you are passing selected props startDate And your startDate is new Date which is current date.

Try something like this and make sure you are selecting both date when props change.

<DatePicker
        dateFormat={dateFormat}
        locale={chosenLocale}
        selected={startDate}
        startDate={startDate}
        endDate={endDate}
        onChange={(date) => setStartDate(date)}
      />

    <DatePicker
      dateFormat={dateFormat}
      locale={chosenLocale}
      selected={endDate}
      onChange={(date) => {
        console.log(date);
        setEndDate(date);
      }}
    />

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[rickysandoval]

@aziyatali that's not really an answer. Your snippet if for a separate solution: using two date pickers to make a range.

The issue is with using the selectsRange prop. When using that prop you cannot set or change the entire range using the input. If you type in dates it'll set the start date but it won't recognize any further input past that.

[rickysandoval]

Also having this issue btw

[mats363]

I have the same issue. Seems like the problem is parsing logic preventing onChange from running unless it's a valid single date. Probably around here

Screenshot with a console.log after typing in the input field.

(https://github.com/Hacker0x01/react-datepicker/blob/f735e60e97da8e5f4066276da9cf601e85e9eeed/src/index.tsx#L604)

Any ideas?

[laug]

See also #3596 and #3906 which report the same issue.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 10 days with no activity.