CODEWITHSUNDEEP
angularangular-material
Jon Sud
Jon Sud

Reputation: 11661

How to disable mat-calendar control?

How to disable the mat-calendar control? (not specific days, but the control it self).

  <mat-calendar [selected]="selectedDate" (selectedChange)="onSelect($event)"></mat-calendar>

stackblitz

I try to add [disabled]="true" but I got an error: Can't bind to 'disable' since it isn't a known property of 'mat-calendar'.

I search at the docs but can't find any relevant information about it.

This is it possible?

Upvotes: 1

Views: 2248

Answers (1)

Moshezauros
Moshezauros

Reputation: 2593

If you want to disable it, simply dont update the value of the selectedDate in your onSelect event.

e.g. if you want to allow users to only set the value, once, simply add another flag that you trigger on the first change:

  ...component...
  disabled = false;

  onSelect(event) {
    if (this.disabled) {
      return;
    }
    console.log(event);
    this.selectedDate = event;
    this.disabled = true;
  }

you can remove the event completely and set the value in the component, and then the calendar will be always disabled

see stackblitz for first example

Upvotes: 1

Related Questions