如何从角形材料日期选择器中更改日期?

时间:2018-08-30 15:10:56

标签: angular typescript angular6

我有一个棱角分明的日期选择器。单击某些事件后,我将从api服务获取新日期。如何更改某些点击事件的日期?

默认情况下,我有一些约会。单击“提交”按钮后,有一些api处理(假定),在订阅响应值时,将使用日期格式的变量。

如何更改某些点击事件的日期?

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field> <br/>
<button (click)="dosomeaction()">Submit</button>


export class DatepickerOverviewExample {

   dosomeaction = function(){
     let date = "2018/09/04"; 
     //assign the above date to the input field
   } 
}

stackblitz

2 个答案:

答案 0 :(得分:1)

您可以这样做

component.html

<mat-form-field>
  <input matInput [matDatepicker]="picker" 
  [(ngModel)]="dateToPass"placeholder="Choose a date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
   </mat-form-field> <br/>
  <button (click)="dosomeaction()">Submit</button>

component.ts

  export class DatepickerOverviewExample {

  dateToPass;

 dosomeaction(){
   let date = new Date("2018/09/04");
   //assign the above date to the input field
   this.dateToPass = date;

  }
}

答案 1 :(得分:0)

看看这个Stackblitz,只需在ngModel中设置日期

export class DatepickerOverviewExample {
   start_time: Date;
   dosomeaction = function(){
      start_time: new Date();
   } 
}

 <input mdInput
     name="start_time"
     #start_time="ngModel"
     date="true"
     [(ngModel)]="start_time"
     placeholder="Choose a date">