如何从角材料datepicker更改日期?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何从角材料datepicker更改日期?相关的知识,希望对你有一定的参考价值。

我有角度材料的日期选择器。点击某个活动,我将从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

答案

你可以这样做

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;

  }
}
另一答案

看看这个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">

以上是关于如何从角材料datepicker更改日期?的主要内容,如果未能解决你的问题,请参考以下文章

如何从我的 DatePicker 片段中传输格式化的日期字符串?

Angular 材料 Datepicker 获得改变的价值

在材料ui的日期选择器中更改formatDate

使用 momentjs 更改 Angular Material 中 md-datepicker 的格式

如何更改 datepicker vuetify 上的日期颜色?

如何呈现材料 UI 输入控件而不是材料 UI 日期选择器的文本字段