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.

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 has to be greater than 0.
• Invalid date " " for month with index " ".
• Invalid date " ". Reason: " ".

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

Appendix: 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)