Question

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

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

Answer 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

Answer 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>

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

2 个答案: