如何在角度的mat-datepicker中将明天的日期设置为默认日期答案

【问题标题】：how to set tomorrow's date as default in mat-datepicker in angular如何在角度的mat-datepicker中将明天的日期设置为默认日期
【发布时间】：2023-04-05 23:27:01
【问题描述】：

在 angular mat-datepicker 中，我希望将默认日期显示为明天。供参考使用此代码：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>

我希望默认日期为明天的日期。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您可以使用value 属性来设置默认值。 https://stackblitz.com/edit/angular-eo6ntj

【讨论】：

【解决方案2】：

试试这样：

Working Demo

模板：

<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);
  }

【讨论】：

【解决方案3】：

您可以使用FormControl 并将您的表单值初始化为明天的日期：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

【讨论】：