Getting "Range Error: Invalid Time Value" on time picker setup

[alextselegidis]

Describe the bug Hello and thanks for this great component. The following setup throws the aforementioned error.

To Reproduce Steps to reproduce the behavior:

1. Go to reactdatepicker.com
2. Use the first example code box
3. Try the following code to use the time picker setup
4. Type "11:1" in the time picker manually (do not select)
5. See the error

Code:

() => {
  const [startDate, setStartDate] = useState(null);
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showTimeSelect
      showTimeSelectOnly
      timeIntervals={15}
      timeCaption="Time"
      dateFormat="HH:mm"
      timeFormat="HH:mm"
    />
  );
};

Expected behavior The user must be able to complete the whole time input manually, till "11:11" for example.

The error comes already as soon as "11:1" is typed.

This only happens if you have set null as the default value of the time picker.

Screenshots

[mellis481]

Here's another example which I've made a codesandbox for: https://codesandbox.io/s/practical-perlman-j79dks?file=/src/App.js. This example uses the "Select Time Only" example from the react-datepicker.com example exactly.

Try to type "11:30 PM" (a valid date) into the input. When you hit "P", it throws an error.

I'm assuming this is caused by recent logic introduced to improve the resolution of user input. It is preventing us from upgrading.

CC: @martijnrusschen

[stee-ren]

I'm seeing the same thing, looks like this issue was introduced with v4.9.0, if I had to guess, might have something to do this this contribution: fix: Inconsistent/broken behavior in parseDate by @maranomynet https://github.com/Hacker0x01/react-datepicker/pull/3903

@alextselegidis looks like the quick way out is to roll back to v4.8.0. Also, I used the "p" formatting, so the locale would be part of the formatting. I suspect the issue relates to the dateFormat. This is used to format the input field (used when the error occurs), not the timeFormat. The timeFormat is only used to format the time drop down.

@mellis481 I took your example and added a locale (+ little bits): https://codesandbox.io/s/billowing-moon-sf06pt?file=/src/App.js What I found is, if the dateFormat was removed, or set to something like "Pp" (localized date and time), it was rejected. If both dateFormat and timeFormat are set to "p" and the locale set to "de" (where 11:11 is correct), it explodes. Same codesandbox as above - ONLY changing the version to 4.8.0, you can see the time can be entered with the keyboard without issue.

Also, I don't know if its a related regression but it looks like previously, setting the locale to a string e.g. locale="pt-BR" (taken directly from the documentation, it doesn't work. Console shows the warning:

A locale object was not found for the provided string ["pt-BR"]. A proper date-fns locale object required - e.g. "date-fns/locale/de", or "date-fns/locale/en-US"

[martijnrusschen]

Released a new version to revert the breaking changes.

[mellis481]

@martijnrusschen It's even more broken now. In my codesandbox above using version 4.10.0, if you tried to type "11:30 PM", it would blow up when you hit "P".

With version 4.11.0, it blows up with you hit the first "1". https://codesandbox.io/s/charming-burnell-qw8rhu

[martijnrusschen]

Interesting, I reverted the PR that caused the initial chaos, but perhaps there's another change that's impacting the behaviour here?

[mellis481]

Seems like more tests would be advisable.

[saltire]

On v4.8.0, on a time-only field, I typed 4:00 pm and on every keystroke, onChange fired with a date matching 4pm (expected behavior, all good).

On v4.9.0-4.10.0, onChange didn't fire on any keystrokes until I typed the p, at which point it fired with an invalid Date and also threw this error.

On v4.11.0, I got the invalid Date and the error as soon as I typed the 4.

[MirKml]

Same here - latest correctly working version is 4.8. for latest - 4.11 - isn't possible type into time picker any number with dateFormat="HH:mm". It immediately crashes with Range Error.

Workaround (isn't always possible) set selected prop into some date e.g. new Date()

[mellis481]

@martijnrusschen This issue is preventing my team from upgrading beyond 4.9.0 since the time picker is effectively completely broken. Are you able to give this some attention?

[AstroProjection]

@martijnrusschen Based on the current master, I've created a PR which seems to avoid this issue. Unfortunately I am relatively new to this repo and didn't get enough time to thoroughly go through the afforementioned changes. Though looking at the flow of this particular update, I created a PR ( https://github.com/Hacker0x01/react-datepicker/pull/4036 ) Which just short circuits the set method and allows the previous flow to take place. It seemed to have fixed the issue as far as I can tell.

Video: https://github.com/Hacker0x01/react-datepicker/assets/13699537/4dd77fba-b8ba-44e7-8989-294607d3d0f1

[mellis481]

This issue appears to be resolved in the latest version (4.14.0) and can be closed.