angular/components · error · Error

mat-date-range-input must contain a matEndDate input

Error message

mat-date-range-input must contain a matEndDate input

What it means

The counterpart to error 223: mat-date-range-input checks after content init that a matEndDate directive exists among its content children. Missing the end input means the range cannot be completed, so Material throws in dev mode.

Source

Thrown at src/material/datepicker/date-range-input.ts:323

   */
  onContainerClick(): void {
    if (!this.focused && !this.disabled) {
      if (!this._model || !this._model.selection.start) {
        this._startInput.focus();
      } else {
        this._endInput.focus();
      }
    }
  }

  ngAfterContentInit() {
    if (typeof ngDevMode === 'undefined' || ngDevMode) {
      if (!this._startInput) {
        throw Error('mat-date-range-input must contain a matStartDate input');
      }

      if (!this._endInput) {
        throw Error('mat-date-range-input must contain a matEndDate input');
      }
    }

    if (this._model) {
      this._registerModel(this._model);
    }

    // We don't need to unsubscribe from this, because we
    // know that the input streams will be completed on destroy.
    merge(this._startInput.stateChanges, this._endInput.stateChanges).subscribe(() => {
      this.stateChanges.next(undefined);
    });
  }

  ngOnChanges(changes: SimpleChanges<this>) {
    if (dateInputsHaveChanged(changes, this._dateAdapter)) {
      this.stateChanges.next(undefined);
    }

View on GitHub (pinned to 0411926e7d)

Solutions

1. Add matEndDate to the second <input matInput> inside mat-date-range-input.
2. If the inputs are conditionally rendered, ensure both are rendered together (e.g. wrap both in a single *ngIf container that still projects correctly).
3. Fix any misspelling of the matEndDate attribute.

Example fix

// before
<mat-date-range-input [rangePicker]="picker">
  <input matInput [matStartDate]="range.start">
</mat-date-range-input>

// after
<mat-date-range-input [rangePicker]="picker">
  <input matInput [matStartDate]="range.start">
  <input matInput [matEndDate]="range.end">
</mat-date-range-input>

function hasEndDateDirective(el: HTMLElement): boolean {
  return !!el.querySelector('input[matenddate]');
}

When it happens

Trigger: A <mat-date-range-input> containing a matStartDate input but no input carrying the matEndDate directive, or the end input removed/hidden via structural directives so it is not projected.

Common situations: Deleting or commenting out the second input during debugging; *ngIf hiding the end input permanently; typos like matEnd instead of matEndDate.

Related errors

• mat-date-range-input must contain a matStartDate input
• A MatDatepicker can only be associated with a single input.
• Invalid date "${date}". Reason: "${result.invalidReason}".
• MatDatepicker: No provider found for DateAdapter. You must a
• MatDatepicker: No provider found for MAT_DATE_FORMATS. You m

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