как установить завтрашнюю дату по умолчанию в mat-datepicker в угловых - PullRequest
1 голос
/ 31 октября 2019

В угловом 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>

Я хочу использовать дату по умолчанию в качестве завтрашней даты.

Ответы [ 3 ]

1 голос
/ 31 октября 2019

Вы можете использовать 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

1 голос
/ 31 октября 2019

Вы можете использовать value свойство для установки значения по умолчанию. https://stackblitz.com/edit/angular-eo6ntj

1 голос
/ 31 октября 2019

Попробуйте так:

Рабочая демоверсия

Шаблон:

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