web-dev-qa-db-ja.com

angular Material datePicker with angular 5

angular materialの日付ピッカーを使用しています。デフォルト値を設定したいのですが、値が表示されません。

<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],
                   ...
angulartypescriptangular-materialangular-material-datetimepicker
8
ssct79

次のように、startAt変更にDateオブジェクトを提供する必要があります。

.tsの場合：

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

HTML：

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

ここで動作するデモ： https://stackblitz.com/edit/angular-n9yojx

10
User3250

これは私にとってはうまくいきます！

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())
6
Rohit Parte

定義された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>))
3
Irrfan23

あなたの.htmlで---

     <mat-form-field style="width:150px;"  color="accent">
            <mat-label>Choose From Date</mat-label>
            <input  class="example-events" matInput [matDatepicker]="picker1"  [ngModel]="dateF" >
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1 ></mat-datepicker>
     </mat-form-field>

あなたの.tsで---

dateF:any=new Date();
0
ASH ASH