DatePicker doesn't use selected locale when typing the date as text

[KrohnicDev]

Describe the bug I have the following DatePicker:

<DatePicker
  selected={startDateTime}
  onChange={selectStartDate}
  showTimeInput
  locale="fi"
  dateFormat="Pp"
  timeFormat="p"
  timeInputLabel="Aika"
/>

Locale is imported and registered in the top of the component file:

import { fi } from 'date-fns/locale';
registerLocale("fi", fi)

Finnish date format is DD.MM.YYYY. When date is selected from the calendar view, it is displayed correctly. However, if the date is typed with a keyboard, it is interpreted by the DatePicker as it were in format of MM.DD.YYYY.

This was verified as follows:

1. Add a console.log into the onChange handler function
2. Clear the text field and start typing e.g. "1.12.2021" which means the 1st of December.
3. The date is printed to the console on each character. When the text field has the string "1.12", it prints "Fri Jan 12 2001" the console.
4. When the whole date has been typed, it still prints "Tue Jan 12 2021".

To Reproduce Steps to reproduce the behavior:

1. Create a DatePicker as described above. Register and use the Finnish locale ("fi").
2. Clear the text field.
3. Type "1.12.2021" and press Enter.
4. Error: The date is interpreted as 12th of January.

Expected behavior The date 1.12.2021 should be interpreted as 1st of December.

Screenshots Here can be seen that 1.12.2021 is incorrectly shown as Tammikuu (January).

Desktop:

• OS: MacOS 11.6
• Browser: Chrome
• Version 4.2.1

[amandapouget]

Any movement on this?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tannermann]

I'm also seeing this issue, it seems to automatically try to detect the locale. How can we ensure the passed locale is used when typing a date?

[dgreene1]

Can this be reopened? If I am using the en_US locale and I type 31/12/2000 (which is Dec 31st 2000 in EU), then I would expect an error.

Is there a way in userland to add in this check?

[pietroanello]

I had the same issue, but only when the dateFormat was "Pp". Using just "P" as dateFormat detects correctly the locale when typing the date, but using "Pp" only detects the locale if the user types the entire date and time string.

For example:

• Using "P", locale "uk": typing "01/02/2024" shows correctly Jan 2 2024

• Using "P", locale "it": typing "01/02/2024" shows correctly Feb 1 2024

• Using "Pp", locale "uk": typing "01/02/2024" with or without time shows correctly Jan 2 2024

• Using "Pp", locale "it": typing "01/02/2024" shows the wrong date Jan 2 2024, typing "01/02/2024 11:00" shows the correct date Feb 1 2024

I solved using dateFormat={["Pp", "P"]}

[KrohnicDev]

Thanks, @pietroanello! I can confirm that dateFormat={["Pp", "P"]} fixes the issue.