What causes "DateFnsAdapter: Cannot format invalid date." in angular/components?

Check adapter.isValid(date) before calling format and handle the invalid branch.

DateFnsAdapter: Cannot format invalid date.

Error message

DateFnsAdapter: Cannot format invalid date.

What it means

DateFnsAdapter.format refuses to format a Date that fails isValid (typically NaN time, i.e. an Invalid Date). date-fns' format would otherwise produce garbage like 'Invalid Date' strings; the adapter throws an explicit error instead so callers handle invalid dates deliberately.

Source

Thrown at src/material-date-fns-adapter/adapter/date-fns-adapter.ts:168

    // Check that the date wasn't above the upper bound for the month, causing the month to overflow
    if (result.getMonth() != month && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      throw Error(`Invalid date "${date}" for month with index "${month}".`);
    }

    return result;
  }

  today(): Date {
    return new Date();
  }

  parse(value: unknown, parseFormat: string | string[]): Date | null {
    return this._parse(value, parseFormat);
  }

  format(date: Date, displayFormat: string): string {
    if (!this.isValid(date)) {
      throw Error('DateFnsAdapter: Cannot format invalid date.');
    }

    return format(date, displayFormat, {locale: this.locale});
  }

  addCalendarYears(date: Date, years: number): Date {
    return addYears(date, years);
  }

  addCalendarMonths(date: Date, months: number): Date {
    return addMonths(date, months);
  }

  addCalendarDays(date: Date, days: number): Date {
    return addDays(date, days);
  }

  toIso8601(date: Date): string {

View on GitHub (pinned to 0411926e7d)

Solutions

Check adapter.isValid(date) before calling format and handle the invalid branch.
Ensure parse() results are non-null before formatting.
Validate/sanitize date strings from user input or APIs before constructing Dates.
Use the adapter's today() or a fallback default date when parsing fails.

Example fix

// before
const d = this.adapter.parse(input, 'yyyy-MM-dd');
return this.adapter.format(d, 'dd/MM/yyyy'); // throws if d invalid
// after
const d = this.adapter.parse(input, 'yyyy-MM-dd');
return d && this.adapter.isValid(d) ? this.adapter.format(d, 'dd/MM/yyyy') : '';

Defensive patterns

Strategy: validation

Validate before calling

if (!date || !adapter.isValid(date)) {
  return ''; // or a fallback string
}
return adapter.format(date, displayFormat);

Type guard

function isAdapterValidDate(adapter: DateAdapter<Date>, d: unknown): d is Date {
  return d instanceof Date && adapter.isValid(d);
}

Try / catch

try {
  return this.adapter.format(date, fmt);
} catch (e) {
  if ((e as Error).message.includes('Cannot format invalid date')) {
    return ''; // or placeholder, or re-parse input
  }
  throw e;
}

Prevention

Always check adapter.isValid after parse() before formatting
Reject null/NaN dates at API boundaries (forms, HTTP responses)
Wrap date parsing + formatting in one helper that handles the invalid branch once
Log invalid input values to surface upstream parse failures

When it happens

Trigger: Calling format() (or getMonthNames/getDayOfWeekNames/getYearName paths that call it) with a Date created from invalid input — e.g. new Date('garbage'), a failed parse returning NaN, or arithmetic on invalid dates.

Common situations: Parsing user text that didn't match the expected format and passing the result straight to format; dates from external APIs that are null/undefined coerced to Invalid Date; date-fns version differences changing parse behavior.

Related errors

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/dcd629e9d2cfc240. Report an issue: GitHub.