how to set tomorrow's date as default in mat-datepicker in angular

Question

In angular mat-datepicker I want show default date as tomorrow. for reference use this code : https://stackblitz.com/angular/nvplmydkkqqg?file=src%2Fapp%2Fdatepicker-overview-example.html

<mat-form-field appearance="outline" class="example-full-width">
 <mat-label>select date</mat-label>
 <input matInput class="matInput" [matDatepicker]="picker" placeholder="select date" [min]="minDate"
formControlName="preparationDate" id="preparationDate" readonly
(click)="picker.open()"(dateChange)="ondateselected(picker._validSelected)">
 <mat-datepicker-toggle matSuffix [for]="picker">
   <mat-icon matDatepickerToggleIcon>date_range</mat-icon>
  </mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

I want default date as tomorrow's date.

Answer 1

You can use value property for setting default value. https://stackblitz.com/edit/angular-eo6ntj

Answer 2

Try like this:

Working Demo

Template:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker [startAt]="tomorrow"></mat-datepicker>
</mat-form-field>

TS:

  tomorrow = new Date();

  constructor() {
    this.tomorrow.setDate(this.tomorrow.getDate() + 1);
  }

Answer 3

You can use FormControl and init your form value to tomorrow date by doing : date = new Date(new Date().setDate(new Date().getDate() + 1));

export class DatepickerOverviewExample {
  date = new FormControl(new Date(new Date().setDate(new Date().getDate() + 1)));
}

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

https://stackblitz.com/edit/angular-cst6qf-p7ud56