Search code examples
angularluxon

How to prevent dates before today in a material Calendar ? (Angular 9)

I used Angular Material Calendar for a project and tried to prevent the selection of dates before today so I tried a [min] constratint but that doesn't do the trick with a luxon creation of today's date so each day, the minimal date moves according to the good day.

Is there a good way to do it? I have my calendar isolated here: https://stackblitz.com/edit/angular-swrr7s?devtoolsheight=33&file=src/app/date-range-picker-overview-example.html

Thanks

Solution

  • Following approach could solve your issue:

    In .ts file

    //today's date
todayDate:Date = new Date();

    In .html file

      <mat-form-field>
    <input matInput [matDatepicker]="picker" [min]="todayDate" placeholder="Date" formControlName="date"> 
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>