fix: dateFns wrong format when typing date (#817)

* fix: dateFns wrong format when typing date

* test(date fns): typing a date should not parse it if not complete

Author: jvnm-dev

src/generate/dateFns.ts

@@ -44,6 +44,30 @@ const localeParse = (format: string) => {
     .replace(/([Ww])o/g, 'wo');
 };
 
+const parse = (text: string, format: string, locale: string) => {
+  return parseDate(text, localeParse(format), new Date(), { locale: getLocale(locale) });
+}
+
+/**
+ * Check if the text is a valid date considering the format and locale
+ *
+ * This is a strict check, the date string must match the format exactly.
+ * Date-fns allows some flexibility in parsing dates, for example, it will parse "30/01/2" as "30/01/002".
+ * This behavior is not desirable in our case, so we need to check if the date string matches the format exactly.
+ *
+ * @param text the date string
+ * @param format the date format to use
+ * @param locale the locale to use
+ */
+const isStrictValidDate = (text: string, format: string, locale: string) => {
+  const date = parse(text, format, locale);
+  if (!isValid(date)) {
+    return false;
+  }
+  const formattedDate = formatDate(date, format, { locale: getLocale(locale) });
+  return text === formattedDate;
+}
+
 const generateConfig: GenerateConfig<Date> = {
   // get
   getNow: () => new Date(),
@@ -106,12 +130,9 @@ const generateConfig: GenerateConfig<Date> = {
     parse: (locale, text, formats) => {
       for (let i = 0; i < formats.length; i += 1) {
         const format = localeParse(formats[i]);
-        const formatText = text;
-        const date = parseDate(formatText, format, new Date(), {
-          locale: getLocale(locale),
-        });
-        if (isValid(date)) {
-          return date;
+
+        if (isStrictValidDate(text, format, locale)) {
+          return parse(text, format, locale);
         }
       }
       return null;

tests/keyboard.spec.tsx

@@ -3,7 +3,7 @@ import KeyCode from 'rc-util/lib/KeyCode';
 import { resetWarned } from 'rc-util/lib/warning';
 import React from 'react';
 import {
-  closePicker,
+  closePicker, DateFnsSinglePicker,
   DayPicker,
   DayPickerPanel,
   DayRangePicker,
@@ -130,6 +130,22 @@ describe('Picker.Keyboard', () => {
     });
   });
 
+  describe('typing date with date-fns', () => {
+    it('should not parse date if not matching format', () => {
+      const { container } = render(<DateFnsSinglePicker format="dd/MM/YYYY" />);
+      const input = container.querySelector('input');
+
+      fireEvent.change(input, {
+        target: {
+          // Typing date partially. Picker should not try to parse it as a valid date
+          value: "01/01/20",
+        },
+      });
+
+      expect(input.value).toEqual("01/01/20");
+    });
+  })
+
   return;
   it('open to select', () => {
     const onChange = jest.fn();

tests/util/commonUtil.tsx

@@ -24,6 +24,8 @@ import {
 import dayGenerateConfig from '../../src/generate/dayjs';
 import enUS from '../../src/locale/en_US';
 import zh_CN from '../../src/locale/zh_CN';
+import enGB from '../../src/locale/en_GB';
+
 import type { PickerBaseProps, PickerDateProps, PickerTimeProps } from '../../src/Picker';
 import type {
   PickerPanelBaseProps,
@@ -35,6 +37,8 @@ import {
   type RangePickerDateProps,
   type RangePickerTimeProps,
 } from '../../src/RangePicker';
+import dateFnsGenerateConfig from '../../src/generate/dateFns';
+import SinglePicker from '../../src/PickerInput/SinglePicker';
 
 dayjs.locale('zh-cn');
 dayjs.extend(buddhistEra);
@@ -226,3 +230,17 @@ export function getDay(str: string): Dayjs {
   }
   throw new Error(`Format not match with: ${str}`);
 }
+// ===================================== Date fns =====================================
+const dateFnsLocale = {
+  locale: enGB,
+  generateConfig: dateFnsGenerateConfig,
+};
+
+type DateFnsSinglePickerProps = Omit<PickerProps<Date>, 'locale' | 'generateConfig'> & React.RefAttributes<PickerRef>;
+
+export const DateFnsSinglePicker = (props: DateFnsSinglePickerProps) => {
+  return <SinglePicker
+    {...dateFnsLocale}
+    {...props}
+  />
+}