[DatePicker]: When typing date range picker chooses invalid date

[scottdickerson]

If we are editing the date and it's showing 08/03/2019. when we show 08/0/2019 in the date picker, the range switches to July 31st. It shouldn't update since 08/0/2019 is an invalid date

[scottdickerson]

I tested in the latest version of Carbon, and received similar results if I hit the enter button in this state

[asudoh]

Hi 👋 thank you for reporting - A quick question, is this against our vanilla variant or against our React variant?

[scottdickerson]

this happens in both, I think it is related to flatpickr

[tw15egan]

Perhaps we should bring this to their attention and see if this is working as they intended or it is a bug

[asudoh]

@scottdickerson Do you see the issue at http://react.carbondesignsystem.com/?path=/story/datepicker--single-with-calendar or https://the-carbon-components.netlify.com/component/date-picker--single.html? I'm asking this because I couldn't see the problem at neither of them. Thanks!

[scottdickerson]

I do, if you're looking at August in the calendar, type 08/0/2019 and hit enter you'll see it switch

[asudoh]

Thanks @scottdickerson. I see enter key is the trigger. Reported at flatpickr/flatpickr#1927.

[georginaso]

@asudoh The problem is not only happening if you set an invalid date.
If you write a valid date in the input (different that the selected in the DatePicker), the date is shown in the input, but the value it's not shown in the DatePicker until you press the enter key.
You can close and open the DatePicker many times but never gets the value if you don't press enter.

[asudoh]

You are right @georginaso for the additional scenario. As mentioned, it's how Flatpickr works. That said, if the Flatpickr author sees many requests for "update-date-as-blur" or a like, e.g. by adding 👍 to flatpickr/flatpickr#1927 flatpickr/flatpickr#1551, things may change. Hesitant of getting around the Flatpickr behavior for the same reason, but reconsideration may happen if we see many 👍s to this issue (description).

[georginaso]

@asudoh There is a related issue already reported on the Flatpickr repo, but don't seem that they are going to fix it 😞: flatpickr/flatpickr#1551

[aledavila]

Closing this as it seems its a Flatpickr issue and not an issue on our end.

[MohummedAbdullah]

On selecting same end date and start date it shows invalid date.

Date Range:  
<DateRangePicker
startDate={startDate}
startDateId="cus-inquiry-filter-start-date"
endDate={endDate}
endDateId="cus-inquiry-filter-end-date"
onDatesChange={({ startDate, endDate }) => {
handleChangeDates(startDate, endDate);
}}
focusedInput={focusedInput}
onFocusChange={handleChangeFocusedInput}
isOutsideRange={() => false}
/>

If anyone has some idea about that please do help