angular/components · error · Error

NativeDateAdapter: Cannot format invalid date.

Error message

NativeDateAdapter: Cannot format invalid date.

What it means

NativeDateAdapter.format first checks isValid(date) (an Invalid Date is Date.parse/NaN-based) and throws rather than emitting 'Invalid Date' strings into the UI. _format (internal formatting path) is the typical caller.

Source

Thrown at src/material/core/datetime/native-date-adapter.ts:165

    return result;
  }

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

  parse(value: any, parseFormat?: any): Date | null {
    // We have no way using the native JS Date to set the parse format or locale, so we ignore these
    // parameters.
    if (typeof value == 'number') {
      return new Date(value);
    }
    return value ? new Date(Date.parse(value)) : null;
  }

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

    const dtf = new Intl.DateTimeFormat(this.locale, {...displayFormat, timeZone: 'utc'});
    return this._format(dtf, date);
  }

  addCalendarYears(date: Date, years: number): Date {
    return this.addCalendarMonths(date, years * 12);
  }

  addCalendarMonths(date: Date, months: number): Date {
    let newDate = this._createDateWithOverflow(
      this.getYear(date),
      this.getMonth(date) + months,
      this.getDate(date),
    );

    // It's possible to wind up in the wrong month if the original month has more days than the new

View on GitHub (pinned to 0411926e7d)

Solutions

1. Check adapter.isValid(date) before formatting and render a fallback string (e.g. '--') for invalid values.
2. Fix the parsing step that produced the invalid Date; use adapter.parse() instead of new Date(string).
3. Handle null/undefined at the component level before calling format.

Example fix

// before
const label = adapter.format(new Date(inputValue), displayFormat);
// after
const parsed = adapter.parse(inputValue, parseFormat);
const label = parsed && adapter.isValid(parsed) ? adapter.format(parsed, displayFormat) : '--';

const date = adapter.parse(value, parseFormat);
if (!date || !adapter.isValid(date)) {
  return '--'; // skip formatting
}
const label = adapter.format(date, displayFormat);

function isValidDate(d: unknown): d is Date {
  return d instanceof Date && !isNaN(d.getTime());
}

try {
  label = adapter.format(date, displayFormat);
} catch (e) {
  if (e instanceof Error && e.message.includes('Cannot format invalid date')) {
    label = '--';
  } else { throw e; }
}

When it happens

Trigger: Calling adapter.format() with an invalid Date — e.g. new Date(undefined), new Date('garbage'), or a Date produced by a failed parse — or rendering a null/coerced-undefined value through formatDate paths.

Common situations: Datepipe-like formatting of user-typed dates from matDatepicker inputs that failed parsing; backend returning empty/undefined strings coerced to Date; timezone/locale parsing mismatches producing Invalid Date.

Related errors

• LuxonDateAdapter: Cannot format invalid date.
• MomentDateAdapter: Cannot format invalid date.
• Invalid date "${date}". Reason: "${result.invalidReason}".
• Invalid month index "${month}". Month index has to be betwee
• Invalid date "${date}". Date has to be greater than 0.

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