Merge pull request #6113 from Hacker0x01/fix/issue-5459-partial-date-navigation

fix: Navigate calendar view when typing partial dates (#5459)

Author: martijnrusschen

src/date_utils.ts

@@ -150,6 +150,40 @@ export function parseDate(
   return null;
 }
 
+/**
+ * Parses a partial date string for calendar navigation purposes.
+ * Unlike parseDate, this function attempts to extract whatever date
+ * information is available (year, month) from a partial input,
+ * returning a date suitable for navigating the calendar view.
+ *
+ * @param value - The date string to parse.
+ * @param refDate - The reference date to use for missing components.
+ * @returns - A date for navigation or null if no date info could be extracted.
+ */
+export function parseDateForNavigation(
+  value: string,
+  refDate: Date = newDate(),
+): Date | null {
+  if (!value) return null;
+
+  // Try to extract a 4-digit year from the input
+  const yearMatch = value.match(/\b(1\d{3}|2\d{3})\b/);
+  if (!yearMatch || !yearMatch[1]) return null;
+
+  const year = parseInt(yearMatch[1], 10);
+
+  // Try to extract a month (1-12) from the input
+  // Look for patterns like "03/", "/03", "03-", "-03" or standalone "03" at start
+  const monthMatch = value.match(/(?:^|[/\-\s])?(0?[1-9]|1[0-2])(?:[/\-\s]|$)/);
+  const month =
+    monthMatch && monthMatch[1]
+      ? parseInt(monthMatch[1], 10) - 1
+      : refDate.getMonth();
+
+  // Return a date with the extracted year and month, using day 1
+  return new Date(year, month, 1);
+}
+
 // ** Date "Reflection" **
 
 export { isDate, set };

src/index.tsx

@@ -28,6 +28,7 @@ import {
   getEffectiveMinDate,
   getEffectiveMaxDate,
   parseDate,
+  parseDateForNavigation,
   formatDate,
   safeDateFormat,
   safeDateRangeFormat,
@@ -764,6 +765,21 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
       // Update selection if either (1) date was successfully parsed, or (2) input field is empty
       if (date || !value) {
         this.setSelected(date, event, true);
+      } else if (!this.props.inline) {
+        // If full date parsing failed but we have partial input,
+        // try to extract date info for calendar navigation
+        const navDate = parseDateForNavigation(
+          value,
+          this.state.preSelection ?? undefined,
+        );
+        // Only update preSelection if navDate is valid and within min/max bounds
+        if (
+          navDate &&
+          (!this.props.minDate || !isBefore(navDate, this.props.minDate)) &&
+          (!this.props.maxDate || !isAfter(navDate, this.props.maxDate))
+        ) {
+          this.setState({ preSelection: navDate });
+        }
       }
     }
   };

src/test/datepicker_test.test.tsx

@@ -2466,6 +2466,95 @@ describe("DatePicker", () => {
     expect(instance!.state.preSelection?.getMonth()).toBe(1); // February (0-indexed)
     expect(instance!.state.preSelection?.getDate()).toBe(10);
   });
+  it("should update calendar view when typing a partial date (year only)", () => {
+    let instance: DatePicker | null = null;
+
+    render(
+      <DatePicker
+        ref={(node) => {
+          instance = node;
+        }}
+        selected={newDate("2024-06-15")}
+        onChange={jest.fn()}
+        dateFormat="MM/dd/yyyy"
+        open
+      />,
+    );
+    expect(instance).toBeTruthy();
+
+    // Verify initial calendar shows June 2024
+    expect(instance!.state.preSelection?.getFullYear()).toBe(2024);
+    expect(instance!.state.preSelection?.getMonth()).toBe(5); // June
+
+    // Type a partial date - just a year (use 2000 which won't match as a month)
+    fireEvent.change(instance!.input!, {
+      target: {
+        value: "2000",
+      },
+    });
+
+    // Calendar should navigate to 2000 with the same month (June) from the selected date
+    expect(instance!.state.preSelection?.getFullYear()).toBe(2000);
+    expect(instance!.state.preSelection?.getMonth()).toBe(5); // June preserved from refDate
+  });
+  it("should update calendar view when typing a partial date (month and year)", () => {
+    let instance: DatePicker | null = null;
+
+    render(
+      <DatePicker
+        ref={(node) => {
+          instance = node;
+        }}
+        selected={newDate("2024-06-15")}
+        onChange={jest.fn()}
+        dateFormat="MM/dd/yyyy"
+        open
+      />,
+    );
+    expect(instance).toBeTruthy();
+
+    // Type a partial date - month and year
+    fireEvent.change(instance!.input!, {
+      target: {
+        value: "03/2014",
+      },
+    });
+
+    // Calendar should navigate to March 2014
+    expect(instance!.state.preSelection?.getFullYear()).toBe(2014);
+    expect(instance!.state.preSelection?.getMonth()).toBe(2); // March (0-indexed)
+  });
+  it("should not update calendar view when typing text without a valid year", () => {
+    let instance: DatePicker | null = null;
+
+    render(
+      <DatePicker
+        ref={(node) => {
+          instance = node;
+        }}
+        selected={newDate("2024-06-15")}
+        onChange={jest.fn()}
+        dateFormat="MM/dd/yyyy"
+        open
+      />,
+    );
+    expect(instance).toBeTruthy();
+
+    // Verify initial calendar shows 2024
+    expect(instance!.state.preSelection?.getFullYear()).toBe(2024);
+    expect(instance!.state.preSelection?.getMonth()).toBe(5); // June (0-indexed)
+
+    // Type text without a valid 4-digit year
+    fireEvent.change(instance!.input!, {
+      target: {
+        value: "03/",
+      },
+    });
+
+    // Calendar should remain on the original date since no valid year was found
+    expect(instance!.state.preSelection?.getFullYear()).toBe(2024);
+    expect(instance!.state.preSelection?.getMonth()).toBe(5); // June (0-indexed)
+  });
   it("should correctly update the input when the value prop changes", () => {
     let instance: DatePicker | null = null;
     const { rerender } = render(