Question

在角垫日期选择器中，我想将默认日期显示为明天。供参考，请使用此代码：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>

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

Answer 1

尝试这样：

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

Answer 2

您可以使用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

Answer 3

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

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

3 个答案: