设置值角度材料日期选择器，来自外部输入答案

【问题标题】：Set value angular material datepicker, from input outside设置值角度材料日期选择器，来自外部输入
【发布时间】：2019-05-01 05:28:12
【问题描述】：

我想设置角度材料日期选择器的值，但从材料日期选择器输入之外的输入

更多信息请看这里：angular-material-datepicker

<mat-form-field>
    <input matInput placeholder="set date picker on blur 
    (blur)="setDatepicker()">
</mat-form-field> <br>
<mat-form-field class="example-full-width">
    <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>

【问题讨论】：

标签： javascript angular angular-material angular-material-datetimepicker

【解决方案1】：

你需要更新

HTML

(blur)="setDatepicker($event.target.value)">

<input matInput [(ngModel)]="input" [matDatepicker]="picker" placeholder="Choose a date">

export class DatepickerFilterExample {
  input: any;
  setDatepicker(val) {
    //alert(val)
    this.input = new Date(val);
  }
}

分叉https://stackblitz.com/edit/angular-material-datepicker-example-2

【讨论】：

【解决方案2】：

通过使用formGroup 和 HTML datepicker

import { FormGroup,FormControl} from '@angular/forms';
date;
  testForm : FormGroup;

  constructor(){
     this.testForm = new FormGroup({
          date:new FormControl(this.date),
          setDate:new FormControl(),
        })
  }
  setDatepicker(evt) {
    var value= this.testForm.controls['setDate'].value
    this.date=new Date(new Date(value).getTime())
    this.testForm.controls['date'].setValue(this.date);
  }

 <form  [formGroup]="testForm" >
<mat-form-field>
  <input matInput type="date" placeholder=" date picker on blur" (blur)="setDatepicker($event)" formControlName="setDate">
</mat-form-field> <br>
<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
   <input matInput [matDatepicker]="picker" placeholder="Date"
                  autocomplete="off"
                  name="date" formControlName="date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker  [startAt]="date" #picker></mat-datepicker>
</mat-form-field>
</form>

【讨论】：