从外部输入设定值角材料日期选择器

时间:2019-05-01 05:28:13

标签: javascript angular angular-material angular-material-datetimepicker

我想设置角度材料日期选择器的值,但是要从外部材料日期选择器输入中输入

请查看此以获取更多信息: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>

2 个答案:

答案 0 :(得分:1)

您需要更新

HTML

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

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

TS

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

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

答案 1 :(得分:0)

使用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>