angular/components · error · Error

A MatDatepicker can only be associated with a single input.

Error message

A MatDatepicker can only be associated with a single input.

What it means

registerInput() guards against one MatDatepicker instance being wired to two inputs. Each datepicker can drive exactly one MatDatepickerInput or MatDateRangePickerInput; if a second input attempts to register while one is already assigned, Material throws this dev-mode error.

Source

Thrown at src/material/datepicker/datepicker-base.ts:612

  /** Emits selected month in year view */
  _selectMonth(normalizedMonth: D): void {
    this.monthSelected.emit(normalizedMonth);
  }

  /** Emits changed view */
  _viewChanged(view: MatCalendarView): void {
    this.viewChanged.emit(view);
  }

  /**
   * Register an input with this datepicker.
   * @param input The datepicker input to register with this datepicker.
   * @returns Selection model that the input should hook itself up to.
   */
  registerInput(input: C): MatDateSelectionModel<S, D> {
    if (this.datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      throw Error('A MatDatepicker can only be associated with a single input.');
    }
    this._inputStateChanges.unsubscribe();
    this.datepickerInput = input;
    this._inputStateChanges = input.stateChanges.subscribe(() => this.stateChanges.next(undefined));
    return this._model;
  }

  /**
   * Registers a portal containing action buttons with the datepicker.
   * @param portal Portal to be registered.
   */
  registerActions(portal: TemplatePortal): void {
    if (this._actionsPortal && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      throw Error('A MatDatepicker can only be associated with a single actions row.');
    }
    this._actionsPortal = portal;
    this._componentRef?.instance._assignActions(portal, true);
  }

View on GitHub (pinned to 0411926e7d)

Solutions

1. Give each input its own <mat-datepicker #pickerN> instance.
2. Inside *ngFor, declare the datepicker inside the loop template so each iteration gets its own.
3. If one picker must serve multiple fields, switch to mat-date-range-input or open programmatic calendars per field.

Example fix

// before
<input matInput [matDatepicker]="picker">
<input matInput [matDatepicker]="picker">
<mat-datepicker #picker></mat-datepicker>

// after
<input matInput [matDatepicker]="picker1">
<input matInput [matDatepicker]="picker2">
<mat-datepicker #picker1></mat-datepicker>
<mat-datepicker #picker2></mat-datepicker>

// Guard before sharing a picker reference
function bindPicker(inputCount: number): void {
  if (inputCount > 1) throw new Error('Each input needs its own <mat-datepicker> instance');
}

When it happens

Trigger: Binding the same #picker reference via [matDatepicker] on two different inputs; dynamically reusing a single MatDatepicker instance across multiple inputs rendered at once.

Common situations: Copying a table cell with an input+datepicker pair but sharing one picker template reference; *ngFor loops where every row's input points to the same [matDatepicker].

Related errors

• mat-date-range-input must contain a matStartDate input
• mat-date-range-input must contain a matEndDate input
• MatDatepicker: No provider found for DateAdapter. You must a
• MatDatepicker: No provider found for MAT_DATE_FORMATS. You m
• MatDatepicker: No provider found for DateAdapter. You must a

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