Locale is not always respected when manually typing in a date

[tannermann]

For example, when typing in a date with a locale that uses DD/MM/YYYY, such as the locale es, when I begin typing the date and have 12/3/20 typed, the date December 3rd, 2020 is selected on the calendar. Only when you finish typing the full date, 12/3/2020 is the correct date of March 12th, 2020 selected.

Expected behavior I expected March 12th 2020 to be selected while typing, even at the point of 12/3/20.

Screenshots Loom video of issue CodeSandbox

Desktop (please complete the following information):

• OS: MacOS 13.2.1
• Browser Chrome
• Version 113

Similar issues have been noted by other users here and here.

[HynekS]

Agreed, manual input should respect dateFormat prop. There is another discussion (3636) where I proposed a temporary workaround, but it should be fixed in the library as it really seems like a bug.

[viqueen]

Hello hello !

my team has found another workaround that does not require any fiddling with the onChange/onChangeRaw handlers.

if you look at the code paths here:

• https://github.com/Hacker0x01/react-datepicker/blob/main/src/index.jsx#L534-L540
• https://github.com/Hacker0x01/react-datepicker/blob/main/src/date_utils.js#L81-L96 you'll see that react-datepicker does attempt to parse the text input using different date formats, and as it turns out, you can set an array, see the props here https://github.com/Hacker0x01/react-datepicker/blob/main/src/index.jsx#L153

example CodeSandbox: React Date Picker workaround

import React from "react";

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const WithDateFormatArray = () => {
  const dateFormatArray = ["dd/MM/yyyy", "dd/MM/yy"];
  return (
    <div>
      <h2>date format array: {dateFormatArray.join(" | ")}</h2>
      <DatePicker dateFormat={dateFormatArray} onChange={() => {}} />
    </div>
  );
};

to be clear, this is not a solution, just a less intrusive workaround , but it does imply using the dateFormat prop as opposed to the locale

[tannermann]

@viqueen Thank you for this insight; this is helpful in understanding this behavior. If the locales you need to support are limited to the extent where you can manage which formats to use for each this is very helpful.

Sadly in my use case the datepicker needs to support potentially dozens of locales dynamically and our team does not have the appetite to manage which formats each conceivable locale should accept, at least at this time. Nonetheless I will share this with my team.

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