fix: parseDate should prefer the first matching format in array

Fix involves vastly simplifying the internal code-paths of
`parseDate`, to prevent further and repeated divergence of behavior
when parsing `dateFormat` as `Array<string>` vs. as `string`

NOTE: Removing the (redundant) `minDate` parameter has no effect on
the tests, as minDate/maxDate boundry checks are enforced elsewhere
in the component's value-updating lifecycle.

NOTE 2: Adding instead `refDate` (using `props.selected`) to
fully utilize the features of `date-fns/parse`.

NOTE 3: The old behavior of re-parsing borked values using
`new Date()` was somewhat dubious as it gave different results
depending on the Browser/OS running the code.
See more here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#parameters

Author: maranomynet

src/date_utils.ts

@@ -118,54 +118,35 @@ export function newDate(value?: string | Date | number | null): Date {
  * @param dateFormat - The date format.
  * @param locale - The locale.
  * @param strictParsing - The strict parsing flag.
- * @param minDate - The minimum date.
+ * @param refDate - The base date to be passed to date-fns parse() function.
  * @returns - The parsed date or null.
  */
 export function parseDate(
   value: string,
   dateFormat: string | string[],
   locale: Locale | undefined,
   strictParsing: boolean,
-  minDate?: Date,
+  refDate?: Date,
 ): Date | null {
-  let parsedDate = null;
   const localeObject =
     getLocaleObject(locale) || getLocaleObject(getDefaultLocale());
-  let strictParsingValueMatch = true;
-  if (Array.isArray(dateFormat)) {
-    dateFormat.forEach((df) => {
-      const tryParseDate = parse(value, df, new Date(), {
-        locale: localeObject,
-        useAdditionalWeekYearTokens: true,
-        useAdditionalDayOfYearTokens: true,
-      });
-      if (strictParsing) {
-        strictParsingValueMatch =
-          isValid(tryParseDate, minDate) &&
-          value === formatDate(tryParseDate, df, locale);
-      }
-      if (isValid(tryParseDate, minDate) && strictParsingValueMatch) {
-        parsedDate = tryParseDate;
-      }
-    });
-    return parsedDate;
-  }
 
-  parsedDate = parse(value, dateFormat, new Date(), {
-    locale: localeObject,
-    useAdditionalWeekYearTokens: true,
-    useAdditionalDayOfYearTokens: true,
-  });
+  const formats = Array.isArray(dateFormat) ? dateFormat : [dateFormat];
 
-  if (strictParsing) {
-    strictParsingValueMatch =
+  for (const format of formats) {
+    const parsedDate = parse(value, format, refDate || newDate(), {
+      locale: localeObject,
+      useAdditionalWeekYearTokens: true,
+      useAdditionalDayOfYearTokens: true,
+    });
+    if (
       isValid(parsedDate) &&
-      value === formatDate(parsedDate, dateFormat, locale);
-  } else if (!isValid(parsedDate)) {
-    parsedDate = new Date(value);
+      (!strictParsing || value === formatDate(parsedDate, format, locale))
+    ) {
+      return parsedDate;
+    }
   }
-
-  return isValid(parsedDate) && strictParsingValueMatch ? parsedDate : null;
+  return null;
 }
 
 // ** Date "Reflection" **
@@ -213,13 +194,7 @@ export function formatDate(
       `A locale object was not found for the provided string ["${locale}"].`,
     );
   }
-  if (
-    !localeObj &&
-    !!getDefaultLocale() &&
-    !!getLocaleObject(getDefaultLocale())
-  ) {
-    localeObj = getLocaleObject(getDefaultLocale());
-  }
+  localeObj = localeObj || getLocaleObject(getDefaultLocale());
   return format(date, formatStr, {
     locale: localeObj,
     useAdditionalWeekYearTokens: true,

src/index.tsx

@@ -606,7 +606,7 @@ export default class DatePicker extends Component<
       dateFormat,
       this.props.locale,
       strictParsing,
-      this.props.minDate,
+      this.props.selected ?? undefined,
     );
     // Use date from `selected` prop when manipulating only time for input value
     if (

src/test/date_utils_test.test.ts

@@ -978,11 +978,35 @@ describe("date_utils", () => {
 
     it("should parse date that matches one of the formats", () => {
       const value = "01/15/2019";
-      const dateFormat = ["MM/dd/yyyy", "yyyy-MM-dd"];
+      const dateFormat = ["yyyy-MM-dd", "MM/dd/yyyy"];
 
       expect(parseDate(value, dateFormat, undefined, true)).not.toBeNull();
     });
 
+    it("should prefer the first matching format in array (strict)", () => {
+      const value = "01/06/2019";
+      const valueLax = "1/6/2019";
+      const dateFormat = ["MM/dd/yyyy", "dd/MM/yyyy"];
+
+      const expected = new Date(2019, 0, 6);
+
+      expect(parseDate(value, dateFormat, undefined, true)).toEqual(expected);
+      expect(parseDate(valueLax, dateFormat, undefined, true)).toBeNull();
+    });
+
+    it("should prefer the first matching format in array", () => {
+      const value = "01/06/2019";
+      const valueLax = "1/6/2019";
+      const dateFormat = ["MM/dd/yyyy", "dd/MM/yyyy"];
+
+      const expected = new Date(2019, 0, 6);
+
+      expect(parseDate(value, dateFormat, undefined, false)).toEqual(expected);
+      expect(parseDate(valueLax, dateFormat, undefined, false)).toEqual(
+        expected,
+      );
+    });
+
     it("should not parse date that does not match the format", () => {
       const value = "01/15/20";
       const dateFormat = "MM/dd/yyyy";

src/test/min_time_test.test.tsx

@@ -79,7 +79,7 @@ describe("Datepicker minTime", () => {
       <DatePickerWithState minTime={minTime} maxTime={maxTime} />,
     );
     const input = container.querySelector("input") ?? new HTMLInputElement();
-    fireEvent.change(input, { target: { value: "2023-03-10 16:00" } });
+    fireEvent.change(input, { target: { value: "03/10/2023 16:00" } });
     fireEvent.focusOut(input);
 
     expect(input.value).toEqual("03/10/2023 16:00");