Установить значение по умолчанию для углового материала datePicker с угловым 5 - PullRequest
0 голосов
/ 14 октября 2018

Я использую подборщик дат из углового материала.Я хочу установить значение по умолчанию, но оно не показывает значение.

<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],
                   ...

Ответы [ 3 ]

0 голосов
/ 14 октября 2018

Вам необходимо предоставить объект Date для изменения startAt, как показано ниже:

In .ts:

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

В html:

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

Работающийдемо здесь: https://stackblitz.com/edit/angular-n9yojx

0 голосов
/ 18 июля 2019

Это работает для меня!

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())
0 голосов
/ 14 октября 2018

Вот мой ответ,

в вашем .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
               ...
});

Это установит текущую дату в качестве даты по умолчанию.

...