为角度材料datePicker设置默认值，角度为5

Question

我正在使用有角材料制成的日期选择器。我想设置一个默认值，但未显示该值。

<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
   <input matInput [picker]="picker" placeholder="Date"
                  autocomplete="off"
                  name="date" 
                  formControlName="date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker  [startAt]="startDatePicker" #picker></mat-datepicker>
</mat-form-field>

这是我的.js代码，我想将其设置为默认值

var date = this.datepipe.transform((new Date().getTime()) - 3888000000, 'dd/MM/yyyy'); 

this.form = this.formBuilder.group({
        dataInicial: [data_inicial],
                   ...

Answer 1

这对我有用！

HTML-

<mat-form-field>
    <input matInput [matDatepicker]="picker1" placeholder="From Date" [formControl]="date1">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker  #picker1></mat-datepicker>
</mat-form-field>

TS-

date1 = new FormControl(new Date())

Answer 2

您需要为startAt更改提供一个Date对象，如下所示：

在.ts中：

date = new Date((new Date().getTime() - 3888000000));

在html中：

<mat-datepicker  [startAt]="date" #picker></mat-datepicker>

这里的工作演示：https : //stackblitz.com/edit/angular-n9yojx

Answer 3

您可以在输入中使用定义的 formControl。

这是 html

<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
    <input [matDatepicker]="picker" matInput placeholder="Date" autocomplete="off" name="date" formControlName="date" [(ngModel)]="date.value">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

这是 TS 声明你 formControl

date: FormControl;
this.date = new FormControl(new Date(<you can provide you date input field if you getting date from other sources>))

Answer 4

这是我的回答，

在你的 .html 中

<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
    <input [matDatepicker]="picker" matInput placeholder="Date" autocomplete="off" name="date" formControlName="date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

在你的.ts中

this.form = this.formBuilder.group({
   date: new FormControl(new Date()), // Current Date
               ...
});

这会将当前日期设置为默认日期。