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

When typing a partial date (e.g., just "2014") in the input field,
the calendar now navigates to that year/month even though the full
date cannot be parsed. This restores the v7 behavior where users
could search through the calendar by typing partial dates.

- Add parseDateForNavigation() to extract year/month from partial input
- Update handleChange to use partial navigation when full parse fails
- Respect minDate/maxDate constraints when navigating
- Handle invalid input gracefully (returns null, calendar stays put)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

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,
@@ -757,6 +758,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,62 @@ 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 2024
+    expect(instance!.state.preSelection?.getFullYear()).toBe(2024);
+
+    // Type a partial date - just a year
+    fireEvent.change(instance!.input!, {
+      target: {
+        value: "2014",
+      },
+    });
+
+    // Calendar should navigate to 2014 even though it's not a complete date
+    expect(instance!.state.preSelection?.getFullYear()).toBe(2014);
+  });
+  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 correctly update the input when the value prop changes", () => {
     let instance: DatePicker | null = null;
     const { rerender } = render(